title: Achieving a planet with rings effect with CSS
body: <p>I am trying to make a planet with rings, like this photo</p>
  
  <p><a href="https://i.stack.imgur.com/0OAz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0OAz1.png" alt="enter image description here"></a></p>
  
  <p>I am currently doing it in what seems to be a very dirty way. The ring (ellipse) is a div with no background and a black border rotated, and I achieve the effect of the ring going behind the planet by adding another half of a red circle on top. </p>
  
  <p>Here is the <a href="https://jsfiddle.net/qds0r4L4/" rel="nofollow noreferrer">JSFiddle</a> and below is a snippet demo.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.elipse {
    width: 300px;
    height: 105px;
    background: none;
    border-radius: 50%;
    -ms-transform: rotate(40deg);  /* IE 9 */
    -webkit-transform: rotate(40deg);  /* Safari */
    transform: rotate(40deg);
    position: absolute;
    left: 45px;
    top: 45px;
    border: 5px solid black;
  }
  .full-planet {
    height: 170px;
    width: 170px;
    border-radius: 170px 170px 170px 170px;
    -moz-border-radius: 170px 170px 170px 170px;
    -webkit-border-radius: 170px 170px 170px 170px;
    position: absolute;
    left: 120px;
    top: 20px;
    background: red;
  }
  .half-planet {
    height: 85px;
    width: 170px;
    border-radius: 170px 170px 0 0;
    -moz-border-radius: 170px 170px 0 0;
    -webkit-border-radius: 170px 170px 0 0;
    -ms-transform: rotate(40deg);  /* IE 9 */
    -webkit-transform: rotate(40deg);  /* Safari */
    transform: rotate(40deg);
    position: absolute;
    left: 147px;
    top: 30px;
    background: red;
  }
  .cont {
    padding-left: 100px;
    padding-top: 100px;
    position: relative;
    width: 0;
    height: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    &lt;div class="full-planet"&gt;&lt;/div&gt;
    &lt;div class='elipse'&gt;&lt;/div&gt;
    &lt;div class="half-planet"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is very troublesome to adjust the parameters to obtain a nice alignment. If I have to change one parameter, for example, I have to change almost every other in order to keep things aligned. Is there a way of doing this so that I don't need to constantly adjust the parameters based on my vision?
  I feel like there is a cleaner way of doing this.</p>