css三角形伪类制作箭头指示

上一章写了三角形多个角度的代码， 现在根据那些个三角形写一个箭头，在实际工作中 TAB的时候有的是需要指向类的箭头标识的，

有的聊天信息中也需要这个。我整理了下 我用的时候写的。

css:

    .div-block:before {
        content: '';
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-right: 9px solid #eee;
        position: absolute;
        top: 25px;
        left: -9px;
    }
    
    .div-block:after {
    content: '';
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fbfdfb;
    position: absolute;
    top: 27px;
    left: -7px;
}

    .div-block {
        width:300px;
        padding: 20px 15px;
        line-height: 25px;
        margin-top: -2px;
        margin-left: 32px;
        margin-right: 32px;
        border-radius: 3px;
        position: relative;
        background: #fbfdfb;
        border: 1px #dfdfdf solid;
        font-size: 15px;
    }

html：

 

  <div class="div-block">内容内容 </div>

　　

可以复制了放到代码里去试试，至于 箭头的位置，自己去换成自己想要的就行

转载于:https://www.cnblogs.com/moxiaolan/p/5610741.html