パーセンテージベースの幅を持つレスポンシブ CSS 三角形を作成するにはどうすればよいですか?

パーセントベースの幅を持つレスポンシブ CSS 三角形

CSS では、上部と上部に異なる幅を設定することで、境界線を使用して三角形を作成できます。下の境界線。ただし、リンク幅にパーセンテージを使用する場合、リンクのコンテンツに基づいて矢印のサイズを動的に調整することはできません。

解決策: パーセンテージベースの三角形

リンクのコンテンツにサイズを適応させる応答性の高い三角形。斜めにして回転させた疑似要素を使用できます。変換:

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

説明:

• 擬似要素は絶対的に配置され、その背景色はリンクから継承されます。
• padding-bottom プロパティ (この例では 15%) は、三角形の高さをリンクのパーセンテージとして設定します。幅。
• 三角形を斜めにして回転すると、目的の形状が作成されます。
• 負の Z インデックスにより、三角形がリンクのコンテンツの背後にあることが保証されます。

利点:

• 三角形のサイズは、以下に基づいて自動的に調整されます。リンクの幅。
• 三角形のアスペクト比は維持されます。

以上がパーセンテージベースの幅を持つレスポンシブ CSS 三角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。