1.html
<div class="triangle2">
<span class="discount">
¥1650
</span>
<span class="origin">
¥5650
</span>
</div>
2.css部分
.triangle2 {
position: relative;
margin: 0 auto;
width: 200px;
height: 30px;
border: 1px solid red;
font-size: 20px;
}
.discount {
position: relative;
float: left;
width: 115px;
height: 30px;
background-color: red;
line-height: 30px;
color: white;
text-align: center;
}
.discount::after {
position: absolute;
right: 0;
content: '';
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 30px 15px 0 0;
z-index: 222;
}
.origin {
float: right;
width: 85px;
height: 30px;
line-height: 30px;
color: rgb(131, 131, 131);
text-align: center;
text-decoration: line-through;
}
3.实际效果