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

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

下面的CSS 程式碼在 元素正下方建立一個箭頭：

下面的CSS 程式碼在

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

但是，此方法需要指定連結的寬度才能實現所需的箭頭尺寸。若要建立根據連結寬度縮放的響應式三角形，請使用以下程式碼：

此程式碼使用傾斜和旋轉的偽元素來建立一個三角形，該三角形根據連結的寬度保持其縱橫比高度。如果您希望三角形的大小適應其內容，請從 .btn 類別中刪除寬度。

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