如何使用百分比寬度建立響應式 CSS 三角形？

建立具有百分比寬度的響應式 CSS 三角形

下面提供的程式碼產生一個位於 下方的箭頭。 element:

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

但是，此方法需要指定連結寬度以確保箭頭的正確大小。為了解決這個限制，我們可以採用一種使用傾斜和旋轉偽元素的回應方法：

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

這種方法確保三角形透過 padding-bottom 屬性保持其縱橫比。刪除 .btn 類別上的 width 屬性允許三角形根據其內容調整其大小，使其完全回應。

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