0

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

enter image description here

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

user3508182
  • 457
  • 1
  • 4
  • 13
  • 1
    You can't create such curves with border radius. Use a canvas instead. – Teemu Jan 31 '20 at 11:00
  • https://stackoverflow.com/questions/56188930/insert-a-curve-in-the-middle-of-a-div?noredirect=1&lq=1 – Sergio Belevskij Jan 31 '20 at 11:08
  • @SergioBelevskij thanks for sharing which is close but can u help me to adjust in my css ? – user3508182 Jan 31 '20 at 11:16
  • You can create some tangential curves, though. See https://jsfiddle.net/jyhrLzon/ . – Teemu Jan 31 '20 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 Jan 31 '20 at 11:20
  • That is not possible, since divs are always squares. You can clone and combine quarters with `border-radius`set, and then modify the transform values. But, it's quite difficult to shape something accurate. – Teemu Jan 31 '20 at 11:23
  • @SergioBelevskij ? – user3508182 Jan 31 '20 at 11:31
  • Notice, that on the page Sergio has linked, they are using multiple divs to show a single line too. You should use proper tools for the task, divs are not purposed to present lines, though they can present some lines. – Teemu Jan 31 '20 at 11:41

1 Answers1

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • i am not allow to use svg that is why i mentioned that i am using css, div – user3508182 Jan 31 '20 at 11:08
  • @user3508182 check the edited solution – Mihai T Jan 31 '20 at 11:21
  • 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 – user3508182 Jan 31 '20 at 11:37
  • If you read the answer. Yes, you can. Just use pseudo elements `before` and `after` instead of divs `line1` and `line2` – Mihai T Jan 31 '20 at 12:09