CSS 倒三角的實現方法就是利用 CSS 的 border 屬性來實現。先來看下面的一段代碼:
.triangle { width: 0; height: 0; border-width: 10px; // 三角形高度 border-style: solid; border-color: transparent transparent #000000 transparent; }
以上代碼實現了一個黑色的向下的倒三角形,通過設置寬高為0,然后設置三角形高度為 border-width,再設置四條邊的樣式和顏色,由于三角形只有三個邊,所以將上下和左右兩條邊都設置為透明色。這樣,就成功實現了倒三角的效果。
下面演示具體實現,代碼如下:
<div class="triangle"></div>
通過以上代碼,我們可以看到即可實現一個黑色的向下的倒三角形。如果想要將倒三角形變成不同的顏色,只需要修改 border-color 的值即可。