幅のパーセンテージを使用してレスポンシブ CSS 三角形を作成する方法

幅のパーセントを使用したレスポンシブ CSS 三角形の生成

問題:

の下に矢印を作成するCSS を使用する要素は、矢印の境界線の幅をピクセル単位で設定できないため、扱いが難しい場合があります。これにより、応答性の高い三角形を実現することが困難になります。

解決策:

CSS を使用して応答性の高い三角形を作成するには、傾斜および回転した疑似オブジェクトを使用できます。 element.

実装:

1. 外部コンテナの作成:

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

2. を追加します三角形:

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

レスポンシブ バージョン:

三角形をレスポンシブにするには、外側のコンテナと三角形のスタイルを次のように変更します。以下:

1. レスポンシブコンテナ:

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

2. レスポンシブ三角形:

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

注: Padding-bottom プロパティは三角形のアスペクト比を維持します。 .btn の幅を削除すると、シェイプのコンテンツに基づいてサイズを調整できるようになります。

この CSS 実装は、アスペクト比を維持し、コンテナの寸法に基づいてサイズを調整するパーセントベースの幅を持つ三角形を作成します。 .

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