How to create curve lines css div? [duplicate]

Question

I am using css, div only. I am trying to draw these type of lines :

.line {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
    border-radius: 50%/100px 100px 0 0;
}

#line1 {
    top: 100px;
    left: 50px;
    
}
#line2 {
    top: 220px;
    left: 150px;
    height: 115px;

    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
}

<div class="line" id="line1"></div>
<div class="line" id="line2"></div>

I am trying to use border-radius: 50%/100px 100px 0 0; but no idea what is going wrong as nothing happens. Sorry for bad English,this is what i am trying to do. Please help.

You can't create such curves with border radius. Use a canvas instead. — Teemu
– Teemu, Commented Jan 31, 2020 at 11:00
@SergioBelevskij thanks for sharing which is close but can u help me to adjust in my css ? — user3508182
– user3508182, Commented Jan 31, 2020 at 11:16
You can create some tangential curves, though. See jsfiddle.net/jyhrLzon . — Teemu
– Teemu, Commented Jan 31, 2020 at 11:16
@Teemu the problem is i cant handle 2 lines at the same time. I am trying to work with 1 line or 1 div for making 1 complete each curve lines — user3508182
– user3508182, Commented Jan 31, 2020 at 11:20

Mihai T · Accepted Answer · 2020-01-31 11:21:25Z

3

You could use SVGs to achieve what you want. See code below

Read more here -> SVG

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 5 50 C 40 10, 65 10, 75 40 S 100 100, 180 20" stroke="black" fill="transparent"/>
</svg>

EDIT: if you can't use SVG or other solutions besides div elements. and css you could use this.

If you can use ONLY 1 DIV element. Then use the below css on pseudo-elements before and after instead of line1 and line2

.line1 {
  border-radius:100px 0 0 0 ;
  border-width: 2px 0 0 2px;
  margin-left:100px;
  }

.line2 {

  border-radius:0 0 100px 0 ;

  border-width: 0 2px  2px 0 ;

  }
  .line {
      border-color:red;
  border-style: solid;
    height:100px;
  width: 100px;
  }

<div class="line line1"></div>
<div class="line line2"></div>

edited Jan 31, 2020 at 11:21

answered Jan 31, 2020 at 11:06

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

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

4 Comments

user3508182 Over a year ago

i am not allow to use svg that is why i mentioned that i am using css, div

Mihai T Over a year ago

@user3508182 check the edited solution

user3508182 Over a year ago

can it be possible to use on 1 line per div? My reason to use 2 lines in code was to make separate lines accordingly like l1 for left curve line 2 for second curve and line 3 for third curve

Mihai T Over a year ago

If you read the answer. Yes, you can. Just use pseudo elements before and after instead of divs line1 and line2

Collectives™ on Stack Overflow

How to create curve lines css div? [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related