CSS line inside a container

Question

Imagine having a box

a          b
 ----------
|          |
|          |
c----------d

The box have point a,b,c and d. I need to have a line from point b to point c, and I will have my data lets say 100% in point a and point d.

is this possible? I tried to look using fr but I still have the problem of drawing a line

Vian, you can make this work using an svg. It will be responsive based on the width and height of the container. You can style the path element to have the proper color and stroke thickness. If that sounds like what you need, say so and I'll add an answer with code for that solution. — JasonB, Mar 08 '19 at 01:50
That might work. Please add this answer, I think this is the better option — Vian Ojeda Garcia, Mar 11 '19 at 05:11

xTrimy · Accepted Answer · 2019-03-08T02:03:02.777

0

You have to make some calculations to connect a line perfectly...

.test{
  width:50vw;
  height:40vw;
  border:2px solid #000;
  position:relative;
}
.test::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  /*get the slope (y/x)*/
  /* here 40/50 = 4/5 ... arctan(4/5) = 0.67 radian  */
  transform:translate(-50%,-50%) rotate(-0.67rad);
  height:2px;
  /* calculate the width of the line (width^2 + height^2)^(1/2) */
  /* width = 64.0312423743 */
  width:64vw;
  background:#000;
}

<div class="test"></div>

edited Mar 08 '19 at 02:03

answered Mar 08 '19 at 01:55

xTrimy

804
9
23

This is good, but this will not be mobile responsive since the width is static – Vian Ojeda Garcia Mar 08 '19 at 01:59
It could be if you can define your dimensions in vw and vh... – JasonB Mar 08 '19 at 02:00
You got the idea, you can make a javascript code to change the line rotation angle and width.. – xTrimy Mar 08 '19 at 02:01
I edited the code btw, it's now in terms of vw instead of px – xTrimy Mar 08 '19 at 02:03

CSS line inside a container

1 Answers1