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

By徐培鈞
LinkedIn

更新日期： 2024 年 10 月 29 日

在網頁設計中，CSS 的 border 屬性不僅可以用來為元素添加邊框，還能幫助我們創建許多有趣的形狀，例如三角形。

利用邊框的寬度和顏色設置，我們可以簡單地製作出不同方向的三角形，這在設計提示箭頭、下拉選單指示符等小圖形時非常實用。

本篇文章將介紹，如何利用 CSS 的 border 屬性來製作各種三角形，讓新手也能輕鬆上手。

CSS 三角形的基本原理

製作三角形的關鍵在於 CSS 的邊框（border）屬性。

當我們設置一個元素的邊框寬度且將其寬度和高度設為 0 時，元素本身就不會顯示，但邊框會形成一個菱形或三角形的效果。

我們可以透過將三個邊設為透明色，保留一個邊的顏色，來製作出三角形的外觀。

基本結構

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

基本 CSS 樣式

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}

製作向上三角形

要製作一個向上的三角形，我們只需要將底部的邊框設置為顏色，並將左右和上方的邊框設置為透明即可。

HTML 結構

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

CSS 樣式

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent; /* 左邊框設為透明 */
  border-right: 25px solid transparent; /* 右邊框設為透明 */
  border-bottom: 50px solid coral; /* 底部邊框設為顏色 */
}

說明

  • width: 0; height: 0;：將元素本身的寬高設為 0，這樣只顯示邊框部分。
  • border-left 和 border-right：設為透明，形成三角形的左、右兩邊。
  • border-bottom：設定顏色和寬度，形成三角形的底部，達到向上三角形效果。

製作向下三角形

向下的三角形原理相同，只需將 border-top 設置為顏色，其他邊設置為透明。

HTML 結構

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

CSS 樣式

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid cornflowerblue; /* 頂部邊框設為顏色 */
}

說明

  • border-top：設置顏色，形成三角形的底邊。
  • border-left 和 border-right：設為透明，用於形成三角形的左右兩邊。

製作向左三角形

向左的三角形則是通過設置 border-right 為顏色，其他三邊為透明。

HTML 結構

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

CSS 樣式

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid mediumseagreen; /* 右邊框設為顏色 */
}

說明

  • border-right：設置顏色，形成三角形的右邊。
  • border-top 和 border-bottom：設為透明，用於形成三角形的頂部和底部。

製作向右三角形

向右的三角形只需將 border-left 設置為顏色，其他三邊設置為透明即可。

HTML 結構

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

CSS 樣式

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid darkorange; /* 左邊框設為顏色 */
}

說明

  • border-left：設置顏色，形成三角形的左邊。
  • border-top 和 border-bottom：設為透明，用於形成三角形的頂部和底部。

調整三角形大小

三角形的大小是由邊框的寬度和高度決定的，通過調整這些值可以更改三角形的大小。

例如，將邊框的寬度加大會使三角形更大；減小邊框寬度則會縮小三角形。

範例

.triangle-up-large {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid coral; /* 更大的底邊框寬度 */
}

這樣的設定會生成一個更大的向上三角形。可以根據設計需求來靈活調整大小。

應用示例：箭頭指示符

三角形常用於製作下拉選單的箭頭或提示框的指示符。

以下示例展示如何使用向下三角形來模擬選單箭頭。

HTML 結構

<div class="menu">
  選單
  <div class="triangle-down-arrow"></div>
</div>

CSS 樣式

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

.triangle-down-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid lightgray; /* 選單箭頭顏色 */
}

說明

  • position: absolute;：讓箭頭位於選單的正下方。
  • transform: translateX(-50%);：將三角形水平居中對齊。
  • 箭頭顏色：設置 border-top 顏色與選單背景一致，使整體看起來更和諧。

總結

利用 CSS 的 border 屬性製作三角形是一個簡單而實用的技巧，能夠幫助我們在網頁設計中增添一些小圖形元素，而無需圖片資源。

透過調整邊框顏色和寬度，可以輕鬆創建不同方向、不同大小的三角形。

總結來說：

  • 向上三角形：設置 border-bottom 為顏色，其他邊為透明。
  • 向下三角形：設置 border-top 為顏色，其他邊為透明。
  • 向左三角形：設置 border-right 為顏色，其他邊為透明。
  • 向右三角形：設置 border-left 為顏色，其他邊為透明。

希望這篇文章幫助你掌握利用 CSS border 屬性製作三角形的技巧，為你的頁面增添更多趣味性！

Similar Posts