CSS Trapezoidal Triangle Border

使用 CSS 繪製三角形

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

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;
}

偽元素

 

以上都是透過CSS可繪製三角形的方法唷~可依據需要選擇其中一種方式!!

番外篇:

這邊提供一個可以 Demo 繪製出來三角形的網站作為參考,若要繪製比較複雜的三角形時可以直接使用這個 CSS三角形生成器參考

 

參考資料:

https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/%E5%A6%82%E4%BD%95%E7%94%A8css%E7%B9%AA%E8%A3%BD%E4%B8%89%E8%A7%92%E5%BD%A2-71478539fb1b

https://footmark.com.tw/news/web-design/css/css-border-create-triangle/

 

Chen Amber