.test{ width:0; height:0; margin:0 auto; border:6px solid transparent; border-top: 6px solid red; }Copy the code

 

1. The principle of equalization is adopted

Each box is a rectangle or square divided into four parts from the center of the shape, up, down, left and right toward each of the four corners.

2. Code implementation

The first step is to ensure that the element is block-level

The second step sets the border of the element

Step 3 Use transparent color for borders that do not need to be displayed