用CSS属性设置三角效果

用CSS属性设置三角效果

先看效果图

代码如下：

.box1 {
            position: absolute;
            top: -16px;
            right: 20px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: pink;
        }
        
        .box2 {
            position: relative;
            width: 100px;
            height: 200px;
            background-color: pink;
            margin: 50px auto;
}
<div class="box2">
        <div class="box1"></div>
</div>

解析：

1. 将要设置的三角元素宽度都设置成0
2. 然后将border：10px solid transparent;
3. 最后选择三角的方向，为border-left/right/top/bottom设置你想要的颜色即可