As shown above, the small triangle like this could be written by the following code:
-
.box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; }
Such code patterns appearing below
- If the four sides of the transparent color into three sides, triangular pattern, the code appears as follows:
.box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; }
- Jingdong style production, the following code:
.jd { position: relative; width: 200px; height: 200px; background-color: pink; } .jd span { position: absolute; top: -10px; right: 0px; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: red; } <div class="jd"> <span></span> </div>