CSS中，很多時候我們需要實(shí)現(xiàn)多種不規(guī)則形狀，其中之一就是三角形。下面我們將介紹如何使用CSS實(shí)現(xiàn)多面不規(guī)則三角形。

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

上面的代碼實(shí)現(xiàn)的是一個基本的三角形，其中width和height為0時，整個div將會被壓縮至最小。border-top為50px，表示三角形高度為50px，而border-left和border-right則用transparent表示為透明，從而形成了左右斜面。

.triangle2 {
width: 0;
height: 0;
border-top: 100px solid #000000;
border-bottom: 50px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

上面的代碼實(shí)現(xiàn)的則是一個上邊長、下邊短的三角形。具體方法為再添加一個border-bottom屬性并設(shè)置height為0，即可。

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

上面的代碼實(shí)現(xiàn)的則是一個不等邊三角形。基本思路是使left和right兩邊長度不等。

.triangle4 {
width: 100px;
height: 50px;
position: relative;
}
.triangle4:before {
content: "";
display: block;
position: absolute;
top: 0px;
left: -50px;
width: 0;
height: 0;
border-top: 50px solid #000000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.triangle4:after {
content: "";
display: block;
position: absolute;
top: 0;
right: -50px;
width: 0;
height: 0;
border-top: 50px solid #000000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

上面的代碼實(shí)現(xiàn)了一個帶有斜邊傾斜的三角形。基本思路是利用before和after偽元素在div兩邊添加另外的三角形，從而實(shí)現(xiàn)斜邊。

以上便是使用CSS實(shí)現(xiàn)多面不規(guī)則三角形的方法了。大家可以根據(jù)需要選擇不同的方式實(shí)現(xiàn)不同的效果。