如何僅使用 CSS 建立三角圓角三角形？

使用CSS 實現三角圓角三角形

在本文中，我們將解決創建自訂顏色三角形的挑戰使用純CSS 的圓角三角形，無需JavaScript 或HTML5 畫布支援。

問題陳述

目標是創建如下所示的形狀，而不訴諸圖像疊加或基於 JS 的技術。

[三角形圓角的圖像三角形]

解決方案

這是一個優雅的CSS 解決方案，靈感來自作者最初的想法：

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

說明

此解決方案結合了多種 CSS 轉換來實現所需的效果shape:

• .triangle：定義基本三角形並設定其背景顏色。
• .triangle:before, .triangle:after：添加了兩個偽元素用於附加
• 基於百分比的尺寸：所有元素的寬度和高度均為10em，以確保其在任何尺寸下均等縮放。
• Border-top- right-radius：設定右上角的半徑，建立圓角效果。
• 變換：施加一系列旋轉、傾斜和縮放來旋轉三角形並調整其橢圓形狀。具體值可能需要根據所需的寬高比進行微調。

最終結果是一個像素完美的三角圓角三角形，完全使用 CSS 製作。

以上是如何僅使用 CSS 建立三角圓角三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！