Kobiki:
Thinking: Given a box, its width and height are 0, and given a border of 10px on the top, bottom, left, and right, set four borders with different colors.
<style> div { width: 0; height: 0; border-left: 10px solid pink; border-top: 10px solid red; border-right: 10px solid blue; border-bottom: 10px solid green; } </style> </head> <body> <div></div>
effect:
Therefore, when we want to set the triangle effect, we can refer to this, set the color of the three borders to transparent, and leave the remaining triangle to set the desired color.