How make arcs shapes with pure CSS

user_16846346 0
Viewed 189

I wanted to make smilly for my clock but I stucked with the arcs .

This question used box shadow . Can it possible with lines to make crescent shape

I searched for many question all are using almost semi-circles not stretched like arcs.

How to make arcs like this in below image with pure CSS . Any suggestion except SVG or Canvas. Thanks for the help .
Know arcs are main in image but only one example will work I will use it at other places my self and position them

enter image description here

#clockStyleCircle{
    position: absolute;
    width: 16vw;
    height: 16vw;
    text-align: center;
    padding: 0%;
    top: 28.5%;
    left: 28.5%;
    border-radius: 50%;
    border: 3px solid black;
    background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1{
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: 24%;
    left: 10%;
    border: 3px solid black;
    border-radius: 50%;
    box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86); /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
    background-color: black;
}
#clockStyleEyeCircle2{
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: 24%;
    left: 65%;
    border: 3px solid black;
    border-radius: 50%;
    box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
    background-color: black;
}
#clockStyleSimileCircle{
    position: absolute;
    width: 8vw;
    height: 3vw;
    top: 68%;
    left: 25%;
    border: 3px solid rgb(36, 36, 36);
    /* border-radius: 0 0 50% 50% /  0 0 100% 100%; */
    border-bottom-left-radius: 100% 200%;
    border-bottom-right-radius: 100% 200%;
    background-color: black;
    box-shadow:  inset 16px 0px #777, inset 16px 0px 1px 2px #777;;
}
<div id="clockStyleCircle">
  <div id="clockStyleEyeCircle1">
    <div id="clockStyleEyeSmallCircle1"></div>
  </div>
  <div id="clockStyleEyeCircle2">
    <div id="clockStyleEyeSmallCircle2"></div>
  </div>
  <div id="clockStyleSimileCircle"></div>
</div>

After referring to above link eyes get alright but as you can see in above snippet shape of mouth renders in shadow . So , tried some changes in below snippet you can see its not stretched and borders are hidden to make it possible . Can it possible to make arc with pure CSS .

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockStyleEyeCircle1 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 10%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
  background-color: black;
}

#clockStyleEyeCircle2 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 65%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  background-color: black;
}

#clockStyleSimileCircle {
  position: absolute;
  width: 6vw;
  height: 6vw;
  top: 45%;
  left: 30%;
  border: 3px solid transparent;
  border-radius: 150px;
  /* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
  /* border-bottom-left-radius: 100% 200%; */
  /* border-bottom-right-radius: 100% 200%; */
  background-color: transparent;
  box-shadow: inset 0px -9px 1px -2px #777;
}
#clockStyleSmileSmallCircle2 {
 position: absolute;
    width: 1vw;
    height: 2vw;
    top: 76%;
    left: 30%;
    border: 3px solid transparent;
    border-radius: 150px;
    /* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
    /* border-bottom-left-radius: 100% 200%; */
    /* border-bottom-right-radius: 100% 200%; */
    background-color: transparent;
    box-shadow: inset 0px 9px 1px -3px red;
}
<div id="clockStyleCircle">
  <div id="clockStyleEyeCircle1">
    <div id="clockStyleEyeSmallCircle1"></div>
  </div>
  <div id="clockStyleEyeCircle2">
    <div id="clockStyleEyeSmallCircle2"></div>
  </div>
  <div id="clockStyleSimileCircle"><div id="clockStyleSmileSmallCircle2"></div></div>
</div>

css html
1 Answers

The width and height of your smile circle is the same, so when you do border-radius it gives you a semi-circle instead of an arc, try increasing the width greater than the height and you should be able to achieve the desired result.

#clockStyleSimileCircle {
   width: 7vw;
   height: 6vw;
}
user_25094720
Related