美文网首页
css3伪类实现箭头

css3伪类实现箭头

作者: jinelei | 来源:发表于2019-02-14 14:59 被阅读0次

    话不多说,直接看代码

    .article-title {
        position: relative;
        color: rgba(0, 0, 0, .55);
        display: inline-block;
        text-align: left;
        border: 1px solid #eee9dc;
        border-radius: 8px;
        &:before {
            content: '';
            position: absolute;
            left: calc(-1em + 1px);
            top: 0.5em;
            border: 0.5em solid transparent;
            border-right-color: #eee9dc;
        }
    }
    
    1. 在父级元素设置伪类。
    2. 在伪类中设置content: '';
    3. 设置边框
    border: 0.5em solid transparent; 
    border-right-color: #eee9dc;
    

    相关文章

      网友评论

          本文标题:css3伪类实现箭头

          本文链接:https://www.haomeiwen.com/subject/szeeeqtx.html