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