css3制作选中的右下角小对号
css3制作选中的右下角小对号
leona_lily 发表于3年前
css3制作选中的右下角小对号
  • 发表于 3年前
  • 阅读 28
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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

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

标签: css3
共有 人打赏支持
粉丝 9
博文 91
码字总数 37807
×
leona_lily
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: