效果展示：
代码实现：
<div class="tri">
<div class="tri_box"></div>
</div>
.tri{
position: relative;
border: 1px solid rgba(68, 170, 255, 0.17);
.panel-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.tri_box::after {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
border-right: 2px solid #44aaff;
border-bottom: 2px solid #44aaff;
content: "";
}
.tri_box::before {
position: absolute;
bottom: 0;
left: 0;
width: 20px;
height: 20px;
border-left: 2px solid #44aaff;
border-bottom: 2px solid #44aaff;
content: "";
}
}
.tri::before {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-left: 2px solid #44aaff;
border-top: 2px solid #44aaff;
content: "";
}
.tri::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 20px;
height: 20px;
border-right: 2px solid #44aaff;
border-top: 2px solid #44aaff;
}
父组件： 必须设置 position:relative/absolute，因为4个角 position 是 absolute；
:before伪元素用于在目标元素的内容前插入额外的内容。:after伪元素用于在目标元素的内容后插入额外的内容。- 在 CSS 中，
:before和::before是两种写法，用于表示伪元素。实际上，它们是等效的，可以互相替代。W3C 规范中建议使用::before表示伪元素，以便与伪类（如:hover）区分开来。这是因为伪元素和伪类在语法上是不同的，而使用双冒号::有助于清晰地区分它们。
