UPD. В первом варианте левый край линии оказался скошен. Исправил.
По старинке, без флексбоксов и закрывая один псевдоэлемент фоном от другого. Зато подстраивается и под длину текста, и под количество строк в нём.
Отступы и высоту строки можно ставить любые. От угла наклона зависит только прибавка к толщине боковой границы. Этой прибавкой компенсируем сужение границы при трансформации сдвига.
https://codepen.io/glebkema/pen/wQdPQG
.broken-line {
overflow: hidden;
position: relative;
}
.broken-line > span {
border-bottom: 4px solid red;
display: inline-block;
padding: 6px 15px; /* для красоты, можно убрать или поменять */
position: relative;
}
.broken-line:before,
.broken-line > span:before {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
transform-origin: left bottom;
transform: skew(-60deg);
z-index: -1;
}
.broken-line:before {
border-top: 4px solid red;
}
.broken-line > span:before {
background: white; /* заслонить часть псевдоэлемента у родителя */
border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */
bottom: -4px; /* вниз на толщину границы родителя */
}
<h2 class="broken-line"><span>Текст</span></h2>
<h2 class="broken-line"><span>Длинный текст <br>в две строки</span></h2>
Первый вариант, со скошенным левым краем у линии. Может быть, тоже пригодится.
https://codepen.io/glebkema/pen/JeNomd
.broken-line {
overflow: hidden;
position: relative;
}
.broken-line > span {
display: inline-block;
padding: 6px 15px; /* для красоты, можно убрать или поменять */
position: relative;
}
.broken-line:before,
.broken-line > span:before {
content: "";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
transform-origin: left bottom;
transform: skew(-60deg);
z-index: -1;
}
.broken-line:before {
border-top: 4px solid red;
}
.broken-line > span:before {
background: white; /* заслонить часть псевдоэлемента у родителя */
border-bottom: 4px solid red;
border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */
}
<h2 class="broken-line"><span>Текст</span></h2>
<h2 class="broken-line"><span>Длинный текст <br>в две строки</span></h2>