Curved Lines Using Only HTML And/Or CSS

Curved lines using only HTML and/or CSS

You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvas should be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.

Anyway, you can always use border-radius combined with border-width or border-color to create curves by showing only one side of the border of element, while hiding all others:

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

Combining this with different combinations of border-radius, and you've got yourself some curves. I've whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/

You can even combine it with CSS3 transform rotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.

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>

Curved lines using border

Please check updated fiddle. https://jsfiddle.net/nileshmahaja/84t6w8ca/3/

I have added one container to the entire html

<div class="container">
    <div class="left-corner-lines">
        <div class="left-round-line yellow-round"></div>
        <div class="left-round-line blue-round"></div>
        <div class="left-round-line purple-round"></div>
        <div class="left-round-line pink-round"></div>
        <div class="left-round-line green-round"></div>
    </div>
</div>

also modified your css code

.container{
    position:relative;
    width: 200px;
    height: 200px;
    overflow:hidden;
}
.left-corner-lines {
      width: 200px;
      left: 50%;
      height: 200px;
      position: relative;
      top:-50%
  }
  .left-round-line {
      border-radius:100%;
      border: 5px solid #fbbc56;
      position: absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto;
  }

  .left-round-line.yellow-round {
      height: 20px;
      width: 20px;
      border-color:#fbbc56;

  }

  .left-round-line.blue-round {
      height: 40px;
      width: 40px;
      border-color: #0090d0;
  }

  .left-round-line.purple-round {
      height: 60px;
      width: 60px;
      border-color: #915da3;
  }

  .left-round-line.pink-round {
      height: 80px;
      width: 80px;
      border-color: #cc5299;
  }

  .left-round-line.green-round {
      height: 100px;
      width: 100px;
      border-color: #bed140;
  }

Creating Diagonal Curved Line with CSS

you can create a full circle inside of a div with ::before and hide half of it with overflow hidden like this

.bottom-circle {
  width: 400px;
  height: 50px;
  position:relative;
  overflow:hidden;
  margin: 0 auto;
}
.bottom-circle:before{
  content:'';
  position:absolute;
  top:-300px;
  left:0;
  width:400px;
  height:400px;
  border-radius:100%;
  border: 2px dashed #c6c6c6;
  box-sizing:border-box
 }

<div class="bottom-circle">

</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>

Is it possible to create curved dashed lines with CSS?

The bad news is that you can't bend the dashed border. Its always be solid if you use border-radius in CSS. But as i think this example will steer you to the right solution.

    #wrapper {        width: 680px;        display:table;        margin: auto;    }    #wrapper > div {        display: inline-block;    }    .circle {        position:relative;        padding: 20px;        width: 120px;        height: 120px;        border-radius: 50%;        background-color: #eee;        border: solid 1px #ddd;        z-index: 999;    }    .line-top {        width: 120px;        height:60px;        z-index: -1;        background: transparent;        border: none;        border-top: dashed 2px orange;        padding: 40px 40px;        border-radius: 50%;        margin: 20px -50px 0;    }    .line-bottom {        width: 120px;        height:60px;        z-index: -1;        background: transparent;        border: none;        border-bottom: dashed 2px orange;        padding: 40px 40px;        border-radius: 0 0 50% 50%;        margin: 0 -65px;    }

    <div id="wrapper">    <div class="circle"></div>    <div class="line-top"></div>    <div class="circle"></div>    <div class="line-bottom"></div>    <div class="circle"></div>    </div>

Can we do a vertical line with curve in CSS?

Is this what you are looking for?
border: px dashed color mixed with border-radius

div {
    margin: 5px;
    display: inline-block;
    width: 300px;
    height: 300px;
    border: 1px dashed #000;
    border-radius: 50px;
}

<div></div>

---

Related Topics