用純 css 畫三角形

原理

.yl {
    width: 0;
    height: 0;
    border-color:red blue green yellow;
    border-style: solid;
    border-width: 40px;
}

我們看到有上下左右四個三角形了。
如果, 我們把4種顏色, 只保留一種顏色, 餘下3種顏色設置爲透明,那麼就是一個三角形了。

直角三角形

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

2.

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

3.

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

4.

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

等腰三角形

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