利用 CSS Clip-Path 屬性製作三角形：新手入門指南

By徐培鈞
LinkedIn

更新日期： 2024 年 10 月 29 日

在網頁設計中，CSS 的 clip-path 屬性是一個強大的工具，能讓我們將元素裁剪成不同形狀，包括三角形、圓形、多邊形等。

相較於使用 border 屬性製作三角形，clip-path 提供了更多的靈活性，並能夠創建出更精確的形狀。

今天，我們將介紹如何使用 clip-path 屬性製作各種方向的三角形，讓新手也能輕鬆上手，快速為網頁增添獨特的設計效果。

什麼是 CSS Clip-Path 屬性？

clip-path 屬性 可以用來裁剪元素，使其顯示為指定的形狀。

這個屬性接受多種形狀參數，例如 circle、ellipse、polygon 等。

利用 clip-path 和 polygon 的搭配，我們可以製作出許多不規則的形狀，包括三角形。

使用 Clip-Path 製作基礎三角形

clip-path 的 polygon 函數允許我們指定多個點的座標，以創建多邊形。

每個點的座標，是根據容器的寬高比例計算的，所以無論容器大小如何改變，形狀都會自適應調整。

HTML 結構

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

CSS 樣式

.triangle {
  width: 200px;
  height: 200px;
  background-color: coral;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 製作向上的三角形 */
}

說明

  • polygon(50% 0%, 0% 100%, 100% 100%)：這裡指定了三個點的座標。
  • 50% 0%：三角形的頂點（位於上方中心）。
  • 0% 100%：左下角。
  • 100% 100%：右下角。
  • 這樣的設置會讓容器顯示為一個向上的三角形。

製作不同方向的三角形

透過調整 clip-path 中的座標，我們可以製作不同方向的三角形，包括向下、向左和向右的三角形。

向下三角形

將頂點設置為底部的中間位置，其餘兩點設置在上方的左右兩側，可以創建一個向下的三角形。

CSS 樣式
.triangle-down {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
  • polygon(0% 0%, 100% 0%, 50% 100%)
  • 0% 0%：左上角。
  • 100% 0%：右上角。
  • 50% 100%：下方中心點，作為三角形的頂點。

向左三角形

將頂點設置為左側中間位置，其餘兩點設置在右側的上下兩角。

CSS 樣式
.triangle-left {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}
  • polygon(100% 0%, 100% 100%, 0% 50%)
  • 100% 0%：右上角。
  • 100% 100%：右下角。
  • 0% 50%：左側中心點，作為三角形的頂點。

向右三角形

將頂點設置為右側中間位置，其餘兩點設置在左側的上下兩角。

CSS 樣式
.triangle-right {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
  • polygon(0% 0%, 0% 100%, 100% 50%)
  • 0% 0%：左上角。
  • 0% 100%：左下角。
  • 100% 50%：右側中心點，作為三角形的頂點。

調整三角形大小

透過調整容器的 width 和 height，可以輕鬆改變三角形的大小。

clip-path 裁剪的形狀會根據容器的大小自動縮放。

例子

.small-triangle {
  width: 100px;
  height: 100px;
  background-color: orange;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

這段樣式會生成一個較小的向上三角形，適合應用於頁面圖標或提示箭頭。

應用範例：提示箭頭

clip-path 製作的三角形可以應用於設計提示箭頭，讓頁面中的文字或按鈕具有引導性。

HTML 結構

<div class="tooltip">
  提示內容
  <div class="triangle-down"></div>
</div>

CSS 樣式

.tooltip {
  display: inline-block;
  padding: 10px;
  background-color: lightgray;
  border-radius: 5px;
  position: relative;
}

.triangle-down {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: lightgray;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

說明

  • position: absolute;：讓箭頭出現在提示框的正下方。
  • transform: translateX(-50%);：讓三角形居中對齊。
  • clip-path: polygon(0% 0%, 100% 0%, 50% 100%);：裁剪成一個向下的三角形，與提示框背景顏色一致。

這樣的設置可以讓提示框更加美觀和具有指示性。

總結

利用 CSS 的 clip-path 屬性製作三角形是一個靈活又簡單的技巧，不僅可以輕鬆創建多種方向的三角形，還能自適應容器大小，讓你的頁面更加美觀。

這篇文章中我們介紹了如何製作向上、向下、向左和向右的三角形，並通過調整容器大小改變三角形尺寸。

總結來說：

  • 向上三角形：clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  • 向下三角形：clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  • 向左三角形：clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  • 向右三角形：clip-path: polygon(0% 0%, 0% 100%, 100% 50%);

希望這篇文章能幫助新手快速掌握 clip-path 製作三角形的技巧，讓你的網頁設計更加靈活且富有創意！

隨著熟練度的提升，你還可以嘗試利用 clip-path 製作更複雜的形狀和效果。

延伸閱讀：利用 CSS Border 屬性製作三角形：新手入門指南

Similar Posts