想要实现的效果如下:
想要实现的效果
实现步骤如下:
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;/*调整小三角形的位置*/

}