Although there is a lot of code on the Internet about drawing triangles, I’m sure there are still some people who don’t know how to do it. Let me give you an example.

This situation should be understandable, not just to set a border

width: 100px;
height: 100px;
border: 20px solid;
border-color: #000;
box-sizing: border-box;

<img src=”https://noxussj.top:3000/16/1.png”></img>

Step two, change the border color, should be able to understand

width: 100px;
height: 100px;
border: 20px solid;
border-color: green blue red orange;
box-sizing: border-box;

<img src=”https://noxussj.top:3000/16/2.png”></img>

Third, enlarge the border so that the white area inside is reduced to zero

width: 100px;
height: 100px;
border: 50px solid;
border-color: green blue red orange;
box-sizing: border-box;

<img src=”https://noxussj.top:3000/16/3.png”></img>

Step 4: Change the other border colors to transparent colors

width: 100px;
height: 100px;
border: 50px solid;
border-color: green transparent transparent transparent;
box-sizing: border-box;

<img src=”https://noxussj.top:3000/16/4.png”></img>

You can control the direction of the triangle by border-color, and adjust the size and shape of the triangle by width, height and border width

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/