JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div id="active">active</div>
<div id="diag">diagonal</div>
<div id="inactive">inactive</div>

CSS

div {
    width: 100px;
    height: 40px;
    background-color: #CCC;
    float:left;
		border-top: 10px solid #FFF;
		border-bottom: 10px solid #FFF;
}

div#active{border-top-color: #333;}
div#diag {border-top:10px solid #333;
transform: matrix(1, .5, 0, 1, 0, 25);}
div#inactive {border-bottom:10px solid #333}

JavaScript

/**
 * для вопроса https://toster.ru/q/462762
 * Как сделать диагональную линию между двумя div?
 */