How can I draw the following lines using CSS

Question

How can I draw the following background image?

easiest wa would be the usage of a SVG. alternatively canvas or pseudo-elements can do it aswell — tacoshy
– tacoshy, Commented Aug 26, 2022 at 9:42

Temani Afif · Accepted Answer · 2022-08-26 10:11:52Z

4

conic-gradient, mask and pseudo element

html:before,
html:after {
  content: "";
  position: fixed;
  aspect-ratio: 1;
  width: 130%;
  left: -40%;
  bottom: 20%;
  border-radius: 50%;
  border: 20px solid green;
  -webkit-mask: conic-gradient(#000, #0000 65%);
}

html:after {
  transform: translate(15%);
}

answered Aug 26, 2022 at 10:11

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

2 Comments

Ruhul Amin Over a year ago

Excellent! Can't we do similar curve only for a section of a page?@temani-afif

Temani Afif Over a year ago

@RuhulAmin apply the pseudo element to that section instead of html

Collectives™ on Stack Overflow

How can I draw the following lines using CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related