How to display an unstraight line between two div

Question

How can I implement the line between the two upper boxes and the bottom text ?

I need:

the "carret" to be under the middle of the first box
the background color to be different under the carret and over/aside it

EDIT: I actually found an easy solution, using 4 div like that:

I still wonder if other ways exist ?

Make a [CSS triangle](https://css-tricks.com/snippets/css/css-triangle/) in a [pseudo-element](https://css-tricks.com/pseudo-element-roundup/) (`::after`) and position it over your line. https://stackoverflow.com/questions/26837802/triangle-shaped-pointer-border-on-a-horizontal-line/26837901 — Jeremy Thille, Oct 27 '21 at 09:20

score 3 · Accepted Answer · edited Oct 27 '21 at 09:25

The easy way to use css pseudo

    .divider{
      border-top: 1px solid #333;
      margin-top: 50px;
      position: relative;
    }
    
    .divider:after{
        background-color: #ffffff;
        bottom: 21px;
        content: '';
        display: block;
        height: 40px;
        left: 50%;
        margin-left: -20px;
        position: relative;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate( 
    45deg);
        transform: rotate( 
    45deg);
        width: 40px;
        z-index: 1;
        border-top: 1px solid #333;
        border-left: 1px solid #333;
    }

<div class="divider"></div>

Demo

How to display an unstraight line between two div

1 Answers1