html的代码如下 <div class="t3"> <div class="cur">100元<i></i></div> <div>200元</div> <
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来实现打斜的背景
