Set the triangle effect with CSS properties

Set the triangle effect with CSS properties

First look at the renderings. The

code is as follows:

.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>

Analysis:

1. Set the width of the triangle elements to be set to 0
2. Then set the border: 10px solid transparent;
3. Finally select the direction of the triangle, set the color you want for border-left/right/top/bottom