Draw a Curve with CSS

Draw a curve with css

You could use an asymmetrical border to make curves with CSS.

border-radius: 50%/100px 100px 0 0;

VIEW DEMO

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

<div class="box"></div>

How to draw a curve with just CSS

You can just do it using border-bottom radius. Like this:

div{    background-color:blue;    width:500px;    height:90px;    border-bottom-left-radius:50%;    border-bottom-right-radius:50%;}

<div></div>

need to make curve line using css

Try this:

.wave {  width: 800px;  height: 200px;  position: relative;}
.wave:after {    content: '';    width: 50%;    position: absolute;    height: 200px;    display: block;    border-bottom: 19px solid black;    border-radius: 50%;    left: 50%;}
.wave:before {    content: '';    width: 50%;    position: absolute;    height: 200px;    display: block;    border-top: 19px solid black;    border-radius: 50%;}

<div class="wave">  </div>

How to draw a curve by using div?

As I had mentioned in comments earlier, please do not use CSS for achieving complex curves and shapes. While it is still possible to use CSS to achieve them (using transform + pseudo-elements like shown in this thread or using box-shadows in this thread), the process is very complex and you can't get much control over the shape, its curvature etc also. SVG on the other hand is designed for such graphics and it can also be scaled without any issues.

Below is a sample snippet on how to create the shape using a couple of cubic bezier curve (c) commands. The cubic bezier curve command takes 3 sets of parameters in total where the first two sets represent the coordinates of the control points for the initial and end points of the curve and the last set represents the coordinates of the actual end point of the curve.

You can control the curvature by modifying the control points.

.container {  position: relative;  width: 300px;}.container > div {  display: inline-block;  box-sizing: border-box;}.items {  width: 100%;  height: 250px;  border-radius: 10px;  border: 1px solid #BBB;  overflow: hidden;}.shape {  position: absolute;  top: 50%;  right: 0%;  height: 100px;  width: 40px;  transform: translateX(100%) translateY(-50%);}path {  stroke: #AAA;  fill: #DDD;}line {  stroke: #444;}

<div class="container">  <div class="items">  </div>  <div class="shape">    <svg viewBox='0 0 50 100' preserveAspectRatio='none'>      <path d='M0,0                c10,15 40,15 48,35                v30                c-8,20 -38,20 -48,35'></path>      <line x1='15' y1='45' x2='30' y2='45' />      <line x1='15' y1='50' x2='30' y2='50' />      <line x1='15' y1='55' x2='30' y2='55' />    </svg>  </div></div>

Creating s-shaped curve using css

SVG

As Harry suggested in the comments, SVG would be your best option as a double curve in CSS isn't feasible without using multiple elements, pseudo elements or using possibly unsupported CSS3 properties.

SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.

It is well supported across all browsers as viewable here: CanIUse

<svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none">  <path d="M0,0            L100,0           C25,50 50,75 0,100z" fill="#8aa7ca" /></svg>

Draw curved lines with css or canvas

You could use SVG it's a bit more browser agnostic I suppose.

SVG Browser Support

Canvas Browser Support

Something like this in your HTML :

<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

Of course this could be generated via Javascript and then rendered. JSFiddle

SVG Tutorial

A Brief intro into the dynamic JS generation would be something along these lines. :

Create your dom element :

<svg id="flight" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

Now we add some JS attributes that you will generated based on variables in flight info:

var svgNS = "http://www.w3.org/2000/svg";
var flightPath = document.createElementNS(svgNS,"path");

flightPath.setAttributeNS(null,"id","path_1");
//This is what you need to generate based on your variables
flightPath.setAttributeNS(null,"d","M10 80 Q 95 10 180 80");
//Now we add our flight path to the view. 
document.getElementById("flight").appendChild(flightPath);

Add some CSS Animation to make it a little prettier and you end up with the following example :

JSFiddle Dynamic

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

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 to draw SVG curved using single path?

Use something like:

<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />

As shown in the documentation, paths can contain an arbitrary number of components.

As a summary:

M/m    Move current position
L/l    Draw a line
H/h    Draw a horizontal line
V/v    Draw a vertical line
C/c    Draw a cubic Bezier
Q/q    Draw a quadratic Bezier
A/a    Draw a circular/elliptal arc
Z/z    Close path

In general, uppercase instructions specify absolute coordinates and lowercase instructions specify relative.

Draw a Curve with CSS