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

想要实现的效果如下：

 实现步骤如下： 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;/*调整小三角形的位置*/
​
}