How do I create curved lines in css without using an image

Question

I am trying to create a website that has multiple curved lines and curved borders see image.

I am using vue and trying to make this look the same for desktop and mobile without have an image unless I have to.

Example of how screen should look

Curved lines examples

Well, you could use an HTML canvas: https://stackoverflow.com/questions/36637211/drawing-a-curved-line-in-css-or-canvas-and-moving-circle-along-it#answer-36637788 — Harm Smits, Aug 08 '18 at 18:16
Possible duplicate of [Draw a curve with css](https://stackoverflow.com/questions/20803489/draw-a-curve-with-css) — Sphinx, Aug 08 '18 at 18:21
For some reason your examples doesn't open here. However I'd encourage you to try using SVG. It's lightweight and scales greatly. — Feel The Noise, Aug 08 '18 at 18:34

score 1 · Accepted Answer · answered Aug 08 '18 at 18:30

You can do it with SVG or with border.

Here is a demo with border.

HTML

<div class="curve"></div>

CSS

.curve {
  width: 500px;
  height: 100px;
  border: solid 5px #000; border-color: #000 transparent transparent transparent;   
  border-radius: 50%/100px 100px 0 0; 
}

MDN for more about border parameters

How do I create curved lines in css without using an image

1 Answers1