例如,实现如下的展示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.price {
width: 160px;
height: 50px;
line-height: 50px;
border: 1px solid red;
margin: 0 auto;
}
.jiangjia {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 600;
margin-right: 15px;
}
.jiangjia i {
position: absolute;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 50px 25px 0 0;
}
.yuanjia {
font-size: 16px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="jiangjia">
¥8999
<i></i>
</span>
<span class="yuanjia">¥9999</span>
</div>
</body>
</html>