Drawing triangles (various angles) with pure CSS_Basic tutorial

Our web pages have ever-changing styles because of CSS. This seemingly simple style language is very flexible in use. As long as you use your creativity, you can achieve many more unimaginable effects. Especially with the widespread use of CSS3, more novel CSS works have emerged.

Today I will bring you a CSS triangle drawing method

Copy code The code is as follows:

#triangle-up {
width: 0;
height: 0;
border- left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Copy code The code is as follows:

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Copy code The code is as follows:

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Copy code The code is as follows:

#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

复制代码 代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码 代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

复制代码 代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码 代码如下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}