如何在沒有 JavaScript 的情況下在 CSS 中建立 3 角圓角三角形？

在CSS 中建立3 角圓角三角形

在不使用JavaScript 的情況下實現具有圓角的自訂顏色形狀可能具有挑戰性。為了解決這個問題，可以採用 CSS 技術來產生具有所需美感的視覺上吸引人的三角形。

創建 3 角圓角三角形的一種方法是使用多個元素進行精心設計的轉換和形狀調整。透過利用 :before 和 :after 偽元素，您可以創建單一形狀獨特的元素的錯覺。

這是一個精煉的解決方案，可以在任何尺寸下提供像素完美的結果：

.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%);
}

使用這種方法，您可以輕鬆創建多功能且具有視覺吸引力的三角形，從而增強網頁設計的美感。

以上是如何在沒有 JavaScript 的情況下在 CSS 中建立 3 角圓角三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！