<!DOCTYPE html>
<html lang="en">
<head>
<style>
.span-line-begin {
background-color: blue;
position: relative;
margin-right: 8px;
}
.span-line-begin:after {
content: "";
position: absolute;
display: inline-block;
0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid blue;
border-bottom: 10px solid transparent;
}
.span-line-end {
background-color: blue;
position: relative;
margin-left: 8px;
}
.span-line-end::after {
content: "";
left: -10px;
position: absolute;
display: inline-block;
0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid blue;
border-bottom: 10px solid transparent;
}
#triangle_right {
0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid #ff5a00;
border-bottom: 70px solid transparent;
}
</style>
</head>
<body>
<span>6152</span>
<span class="span-line-begin"><111></span>
<span class="span-line-begin"><222></span>
<span>wew</span>
<span class="span-line-end"></222></span>
<span class="span-line-end"></111></span>weqwe
<div id="triangle_right"></div>
</body>
</html>