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.