css3的代替图片的三角形

1.小三角形（与边框结合，不兼容IE8）

.callout{
    position: relative;
    width: 100px;
    height: 100px;
    background: #fce6ed;
    border: 1px solid #ccc;
}
.callout::before{
    content: '';
    position: absolute;
    top: -6px;
    left: 15px;
    padding: .5px;
    background:inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg); 
}

<div class="callout"></div>

1.1小三角形（不与边框结合，兼容IE8）

.callout{
    position: relative;
    width: 100px;
    height: 100px;
    background: #fce6ed;
    border: 1px solid #ccc;
}
.callout::before{
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: -15px;
    left: 15px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent  transparent #fce6ed transparent;    
}

2.

转载于:https://www.cnblogs.com/xueweijie/p/6845445.html