В данный момент у меня получилось сделать с двумя разными span. Можно ли сверстать такой заголовок и сделать чтобы перенос строк делался автоматически, а не как у меня сейчас через span?
Мои искодники с codepen.io/WoodRest/project/editor/XwoLJB
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.tape-title {
display: table;
}
.tape-title:hover .tape-title-tx span {
color: #fff;
}
.tape-title-tx span {
display: table;
background: #ddd;
font-size: 48px;
color: #000000;
font-weight: 600;
margin: 6px 0px;
padding: 0px 10px;
position: relative;
transition: all 0.2s ease;
}
.tape-title-tx span:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 53px solid #ddd;
content: '';
position: absolute;
right: -15px;
top: 0;
}
.tape-title-tx span:before {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 53px solid #ddd;
content: '';
position: absolute;
left: -15px;
}
.tape-title-top-vr {
position: absolute;
top: -1px;
width: 100%;
height: 6px;
background: #ddd;
display: table;
transform: rotate(-0.5deg);
left: 14px;
}
.tape-title-top-vr:after {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 14px solid transparent;
border-top: 35px solid #ddd;
content: '';
position: absolute;
right: -3px;
top: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<a href="#" class="tape-title">
<div class="tape-title-tx">
<span>
<div class="tape-title-top-vr"></div>
Длинный заголовок
</span>
<span>
<div class="tape-title-top-vr"></div>
в две строки
</span>
</div>
</a>
<script src="scripts/index.js"></script>
</body>
</html>