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.

I couldn't somehow find the perfect shape though. Please help me. — Alex Deneris
– Alex Deneris, Commented Nov 19, 2019 at 5:51
There are just something that aren't worth doing with CSS - this is likely one of those things. You could probably get something close with SVG. — Jon P
– Jon P, Commented Nov 19, 2019 at 5:59

Temani Afif · Accepted Answer · 2019-11-19 08:50:30Z

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>

edited Nov 19, 2019 at 8:50

answered Nov 19, 2019 at 8:44

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Deneris Over a year ago

thank you for this answer! it's much easier and understandable since I'm not so familiar with SVG's

G-Cyrillus · Accepted Answer · 2019-11-19 23:06:29Z

You can also use box-shadow ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

demo aside your image:

div {
  border: solid 6px;
  display: inline-flex;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}

code {
  font-size: 30px;
  color: green;
  margin: auto;
  font-weight: bold;
}

div,
img {
  vertical-align: middle;
}

<img src="https://i.sstatic.net/HRpQY.png">
<div><code>box-shadow</code></div>

another example :

div {
float:left;
  height: 180px;
  width: 180px;
  margin: 1em;
  box-sizing: border-box;
  padding: 25px;
  background: #F4E5D9;
  box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;

<div>
  <p>inset shadow </p>
  <p>border-radius </p>
  <p>decreased shadow </p>
</div>
<div>
  <p>inset shadow </p>
  <p>border-radius </p>
  <p>decreased shadow </p>
</div>

you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .

but SVG would be at best here ;)

yes I've tried using box shadow but maybre I will prefer SVG for this. Though it may be complicated to learn. There are a lot of numbers! but I will try to use this! thanks for this though! :)

jbutler483 · Accepted Answer · 2019-11-24 20:30:47Z

0

You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'

div {
  height: 200px;
  width: 200px;
  overflow: hidden;
  border: 5px solid black;
  background:orange;
  border-radius: 50%;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  border: inherit;
  border-radius: 50%;
  background: white;
  top: -20%;
  left: -100%;
}

<div></div>

answered Nov 24, 2019 at 20:30

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related