Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

To draw a triangle with CSS3, you can use the border and transparent border features of the element. The following is a simple example code:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

In this example, we create an element with a width of 0 and a height of 0, and set three borders to control the left hypotenuse, right hypotenuse, and bottom of the triangle. By adjusting the width and color of the border, you can draw triangles of different styles.

You can apply the above code to an HTML element, for example:

 <div class="triangle"></div>

This will display a triangle on the page.