css绘制直角三角形

.tri {
            width: 0; height: 0;
            border-color: red blue red blue;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
     }

 

---

.tri2 {
            width: 0; height: 0;
            border-color: red blue blue red;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
        }

---

.tri3 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

---

.tri4 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

---

.tri5 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

---

.tri6 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

---

        /*五角星 由三个等边三角形拼接而成*/
        #star-five {
            position: relative;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(35deg);
            margin: 50px;
        }
        #star-five::before {
            content: "";
            position: absolute; top: 3px; right: -95px;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-70deg);
        }
        #star-five::after {
            content: "";
            position: absolute; top: 6px; right: -96px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-145deg);
        }

---

更多css绘制的图形请参考：

https://css-tricks.com/the-shapes-of-css/