CSS implements the triangle effect and css implements the triangle effect.

CSS implements the triangle effect and css implements the triangle effect.

Method 1: Use border to set the border. The element has a height and a 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:

You can use the transform attribute to rotate the triangle to achieve the desired effect.

 

Method 2: Use border to support triangles

<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: click "234" or click the selected option to point the triangle to the corresponding option.

 

TIPS:

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

2. Differences between the two methods: the second method sets the same triangle background color as the border color; the first method sets the different triangle background color and border color; you need to select a method based on the effects of different application scenarios.

In the second method, you can use two triangles with different colors to overwrite the background color and border color.