如何为一个大div边框添加一个小三角形

技术开发

想要实现的效果如下：
想要实现的效果

实现步骤如下：
HTML代码：

1
2
<div class="example" style="width:300px; height:150px;background: #66ccFF">
</div>

css代码（重要）：

1
2
3
4
5
6
7
8
9
10
11
12
.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;/*调整小三角形的位置*/

}