幅のパーセントを使用してレスポンシブ 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 中国語 Web サイトの他の関連記事を参照してください。