html的代码如下
<div class="t3">
<div class="cur">100元<i></i></div>
<div>200元</div>
<div>500元</div>
<div>1000元</div>
</div>
css的代码
.t3 div.cur i {
display: block;
position: absolute;
border-bottom: 15.4px solid #c00;
border-left: 2rem solid transparent;
width: 0px;
height: 0px;
bottom: 0rem;
right: 0;
}
.t3 div.cur i:after {
position: absolute;
content: '\2714';
color: #fff;
left: -1rem;
top: -0.7rem;
font-size: 1.2rem;
}
效果图:
解释:
after是css3的新特性,直接在css里面设置,就会自动在i标签的后面来设置属性内容,其中content的‘\2714’是图片里面的白色对号,然后位置在相对固定一下就出来效果了;
而针对他的打斜背景想了好久,最后发现是通过i标签来控制的,然后通过是指border-bottom和border-left来实现打斜的背景