想要实现的效果如下:
实现步骤如下: HTML代码:
<div class="example" style="width:300px; height:150px;background: #66ccFF">
</div>
css代码(重要):
.example:before {
content: '';
width: 0;
height: 0;
border: 10px solid transparent; /*调整小三角形的大小*/
border-bottom-color: #305573;/*改变小三角的颜色(最好就是和父级div的背景颜色相同);bottom是用于调整小三角的方向*/
position: absolute;
left: 115px;/*调整小三角形的位置*/
bottom: 100%;/*调整小三角形的位置*/
margin-top: 20px;/*调整小三角形的位置*/
}