How to create broken lines on CSS/HTML/JS

Question

Is it possible to create the broken line using HTML/CSS/JS, not picture. It has to look like in a photo.

PS sorry for my ENG)

Answer 1

 .broken-line { position: relative; height: 10px; border-top: 1px solid #000; }.broken-line:before { position: absolute; left: -1px; top: -1px; content: ''; border-top: 10px solid #000; border-right: 10px solid transparent; }.broken-line:after { position: absolute; left: -2px; top: -2px; content: ''; border-top: 10px solid white; border-right: 10px solid transparent; }

 <div class="broken-line"></div>

Answer 2

You can use an SVG to make something like this pretty easily.

 <svg viewBox="0 0 500 80" width="500" height="80" stroke="blue"> <text x="75" y="22" fontsize="20" stroke="black">I'm text and I'm on a line lalalalala</text> <line x1="0" x2="50" y1="80" y2="30" /> <line x1="50" x2="500" y1="30" y2="30" /> </svg>

Answer 3

Try the following

.broken-line {
 border-top: 5px solid red;
 border-radius: 25px;
}

You can change the border-radius to whatever you want to make it more sharp.

Answer 4

.broken-line {
  width: 180px; /* The width/length of the normal line */
  height: 10px; /* The "height" of the broken part */
  border-top: 2px solid #19c4b0; /* The normal line */
  border-left: 2px solid #19c4b0; /* The broken line */

  transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

<div class="broken-line"></div>

You could also add a border-radius easily if you want... Example:

...
border-radius: 10px;
...

Answer 5

Yes there's multiple ways to accomplish it with html/css/svg/js. Here's an example of one technique to get you started.

 body { padding: 5rem 2rem; }.container { position: relative; }.line-tooltip { display: inline-block; position: absolute; left: 1.75rem; border-bottom: dodgerblue 2px solid; transform: translateY(-2rem); opacity: 0; transition: opacity.25s ease; }.line-tooltip:before { content: ""; display: block; position: absolute; bottom: -1.1rem; left: -.5rem; height: 1.25rem; width: 2px; background-color: dodgerblue; transform: rotate(45deg); } #line-test { color: dodgerblue; } #line-test:hover +.line-tooltip { opacity: 1; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/> <div class="container"> <i id="line-test" class="fas fa-info-circle"></i> &lt;- Hover the icon... <aside class="line-tooltip">Hey I'm some text that makes a nifty tooltip. Yay!</aside> </div>