用CSS繪製一個三角形

王铁柱6發表於2024-11-22
CSS

可以使用 CSS 的 border 屬性來繪製三角形。核心思想是建立一個元素，並將其內容隱藏，只顯示其邊框。透過設定不同的邊框顏色和寬度，可以只顯示一個三角形的邊框。

以下是一些繪製不同方向三角形的示例：

1. 向上三角形:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

2. 向下三角形:

.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

3. 向左三角形:

.triangle-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

4. 向右三角形:

.triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

解釋:

  • width: 0; 和 height: 0; 將元素本身的尺寸設定為零，這樣我們就只看到邊框。
  • border-left, border-right, border-top, border-bottom 分別設定四個邊框的寬度和顏色。
  • transparent 表示透明，這樣就隱藏了不需要的邊框。
  • 10px 和 black 可以根據需要調整三角形的大小和顏色。

使用方法:

<!DOCTYPE html>
<html>
<head>
<title>CSS Triangle</title>
<style>
/*  將上面CSS程式碼複製到這裡 */
</style>
</head>
<body>

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

</body>
</html>

這段程式碼將建立四個不同方向的三角形。

其他技巧:

  • 可以使用 border-width 屬性分別設定不同邊框的寬度，例如 border-width: 10px 5px 15px 20px; (上、右、下、左)。
  • 可以使用 border-color 屬性分別設定不同邊框的顏色，例如 border-color: red green blue yellow; (上、右、下、左)。

希望這些資訊能幫到你!

相關文章