首頁 > web前端 > css教學 > 如何在 CSS 中建立響應式基於百分比的三角形?

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

Barbara Streisand
發布: 2024-12-03 08:16:09
原創
868 人瀏覽過

How to Create a Responsive Percentage-Based Triangle in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板