Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS

Question

Currently, I am playing with HTML and CSS and I wanted to make a icon from this image

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.

Here is my HTML structure:

<link rel="stylesheet" href="style.css">

<div class="cont">
    <div class="icon2">
        <div class="inner-circle"></div>
    </div>
</div>

and here is my CSS:

.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;
   }

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.

Answer 1

You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:

.box {
  width:150px;
  height:150px;
  border-radius:50%;
  border:4px solid;
  background:
    radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}

<div class="box"></div>