CSS to achieve triangle effect

Method 1: Use border to set the border. The element has height and width

<i class="triangle"></i>

.triangle {
     transform: rotate(45deg);
     display: block;
     width: 12px;
     height: 12px;
     border: 1px solid #9e9e9e;
     border-top-color: transparent;
     border-right-color: transparent;
     background-color: #fff;
}

Effect:

Use the transform attribute to rotate the triangle to achieve the desired effect.

Method 2: Use border to support the triangle

<i class="triangle"></i>

.triangle {
     display: block;
     position: absolute;
     width: 0;
     border-width: 6px;
     border-color: transparent transparent red;
     border-style: dashed dashed solid;
     top: -12px;
     right: 76px;
}

Effect:

Application scenario: When you click 234 or click to select, the triangle points to the corresponding option

Tips:

1. Learn to often use pseudo elements such as after or before to implement triangles

2. The difference between the two methods: the triangle background color and the border color set by the second method are the same; the triangle background color and the border color set by the first method can be different; the method needs to be selected according to the effects of different application scenarios .

The second method can also achieve different effects of background color and border color by using two triangle covers with different colors.