如何建立具有基於百分比寬度的響應式 CSS 三角形？-css教學-PHP中文網

如何建立具有基於百分比寬度的響應式 CSS 三角形？

Mary-Kate Olsen

發布： 2024-12-09 14:36:11

原創

423 人瀏覽過

How Can I Create a Responsive CSS Triangle with a Percentage-Based Width?

基於百分比寬度的響應式CSS 三角形

在CSS 中，我們可以透過為頂部和頂部設定不同的寬度來使用邊框建立三角形。底部邊框。但是，當連結寬度使用百分比時，箭頭的大小無法根據連結的內容動態調整。

解決方案：基於百分比的三角形

創建一個響應式三角形使其大小適應連結的內容，我們可以使以帶有傾斜和旋轉的偽元素轉換：

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

登入後複製

說明：

偽元素絕對定位，背景顏色繼承自連結。
padding-bottom 屬性（本例為 15%）將三角形的高度設定為連結高度的百分比寬度。
傾斜和旋轉三角形可建立所需的形狀。
負 z 索引可確保三角形位於連結內容的後方。

優點：

三角形的大小會依照連結的寬度。
三角形的縱橫比保持不變。

以上是如何建立具有基於百分比寬度的響應式 CSS 三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！