CSS で応答性の高いパーセンテージベースの三角形を作成するには?

CSS: 応答性の高いパーセントベースの三角形の生成

課題は、CSS を使用してハイパーリンク要素の下に矢印を作成することから発生しますが、境界線の幅をピクセル単位で指定すると、応答性に制限が生じます。この記事では、傾斜および回転された疑似要素を使用して、パーセンテージベースのサイズ設定で三角形を実現するソリューションを示します。 ".btn" クラスでは、固定幅を削除し、三角形のサイズがそれに適応できるようにします。コンテンツの幅。 「.btn:after」疑似要素は絶対的に配置され、skewX および回転して三角形の形状を作成し、その背景色はボタンの背景と一致します。

padding-bottom を利用することで、三角形のアスペクト比を維持します。 。このアプローチにより、三角形の応答性が維持され、ハイパーリンク内のテキスト コンテンツと URL に比例してサイズが変更されます。

以上がCSS で応答性の高いパーセンテージベースの三角形を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。