title: Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS
body: <p>Currently, I am playing with HTML and CSS and I wanted to make a icon from this image <a href="https://i.stack.imgur.com/HRpQY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HRpQY.png" alt="enter image description here"></a></p>
  
  <p>the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable. </p>
  
  <p>Here is my HTML structure:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;div class="cont"&gt;
      &lt;div class="icon2"&gt;
          &lt;div class="inner-circle"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my CSS:</p>
  
  <pre><code>.cont {
      width: 190px;
      height: 190px;
      padding: 20px;
   }
   .icon2 {
      position: relative;
      border: 2px solid #353332;
      width: 187px;
      height: 184px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: inset 20px 35px #1CAEE3;
      transform: rotate(177deg);
    }
    .inner-circle {
      border: 7px solid #353332;
      width: 120px;
      height: 183px;
      background-color: #fff;
      border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
      transform: rotate(240deg);
      display: block;
      margin: 6px 0px 4px 35px;
      border-top: 0;
      border-bottom: 0;
      border-left: 0;
     }
  </code></pre>
  
  <p>Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.</p>