如何在 CSS 中建立響應式基於百分比的三角形？

CSS：產生基於百分比的響應式三角形

使用CSS 在超連結元素下方建立箭頭，但指定以像素為單位的邊框寬度限制了反應能力。本文示範了一種採用傾斜和旋轉偽元素來實現基於百分比調整大小的三角形的解決方案。

響應式三角形實作

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

在「.btn」類，我們刪除了固定寬度，允許三角形的大小適應內容的寬度。 「.btn:after」偽元素絕對定位、skewX 並旋轉以創建三角形，其背景顏色與按鈕的背景相符。

透過使用 padding-bottom，我們保持了三角形的縱橫比。這種方法可確保三角形保持回應，並根據超連結中的文字內容和 URL 按比例調整大小。

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