CSS Trapezoidal Triangle Border

使用 CSS 繪製三角形

Chen Amber 2023/04/18 10:55:00

0 3103

CSS 提供了多種方法來繪製三角形，以下列舉幾種方法。

1. 使用 border 屬性繪製三角形

使用 border 屬性來繪製三角形是最簡單的方法，它利用了 border 屬性可以設置為不同寬度和顏色的特性，進而組合出三角形的形狀。以等腰直角三角形為例，可以這樣實現：

<div class="triangle"></div>

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

這裡的 .triangle 是一個空的 div 元素，我們使用 border 屬性來繪製三角形。 width 和 height 屬性都設置為 0，因為我們不需要繪製一個實心的三角形。 border-top 屬性設置了三角形底部的寬度和顏色，這裡寬度設為 50px，顏色為紅色， border-right 屬性設置了右邊的邊框寬度和顏色，這裡設為 50px，顏色設為透明。

Borer屬性三角形

2. 使用 transform 屬性繪製三角形

使用 transform 屬性來繪製三角形是另一種常見的方法，它使用了 transform 屬性中的 rotate 和 scale 函数來實現。以等邊三角形為例：

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid green;
  transform: rotate(45deg);
}

在這個例子中，我們同樣將元素的寬度和高度設置為 0。然後，我們使用 border 屬性來設置三角形的三個邊框，並將元素旋轉 45 度以產生三角形的形狀。

transform

3.使用偽元素（pseudo-element）

在元素內使用:before或:after偽元素，並設定寬度和高度為0，再透過border屬性設定三邊的寬度和顏色即可。

.triangle::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid blue;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}

偽元素