JSFiddle - React, Tailwind, and code Playground

by marsone

HTML

<div style="color:sienna;margin-left:120px;border:2px solid black;">Hello World</div>
<div style="color:sienna;margin-top:145px;border:2px solid black;">Bye WORLD</div>
<div class="line" style="left:40px; top:25px; /* point A */">
    <div style="
    border-width: 0px 0px 150px 100px;        /* point B (minus A) */
    border-bottom-color: red;                 /* line color */
  "></div>
    <div style="
    left: 2px;                                /* line width */
    border-width: 0px 0px 150px 100px;        /* point B (minus A) */
    border-bottom-color: white;               /* background color */
  "></div>
</div>

CSS

.line {

     position:absolute;

     /* doesn't have to be absolute */

     z-index: -1;

     /* places the line behind other elements */

 }

 .line div {

     position:absolute;

     left: 0px;

     top: 0px;

     border-left-color: transparent;

     border-style: solid;

 }