0

I'm trying to create this image: https://i.sstatic.net/7k4Uq.png

I'm not sure what the best way to do this is. I got the CSS to work, but I don't know if there is a "better way" of doing it, or a cleaner/easier method. My CSS is below:

 :root{ --size-red: 70px; --size-grey: 43px; } .arc { width: 0; height: 0; position: relative; border-left: var(--size-red) solid transparent; border-right: var(--size-red) solid transparent; border-top: 100px solid red; border-radius: 51%; } .arc:after { content:''; width: 0; height: 0; position: relative; right: var(--size-grey); border-left: var(--size-grey) solid transparent; border-right: var(--size-grey) solid transparent; border-top: 60px solid white; border-radius: 51%; }

Any suggestions for how to make my code look cleaner/more manageable would be appreciative. Thanks!

Improve this question
3
  • I'm voting to close this since it's opinion based and OPs code already works. Commented Sep 22, 2020 at 20:08
  • this is might helps stackoverflow.com/questions/13059190/… Commented Sep 22, 2020 at 20:25
  • The listed links answer my question perfectly, thank you! Commented Sep 22, 2020 at 21:38
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.