css3制作选中的右下角小对号

原创
2015/04/07 09:50
阅读数 3.2K

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来实现打斜的背景

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部