とともに カットアウトボーダーデザイン 何が見つかるかをユーザーに示すことができます HTML要素の境界領域の下. このタスクは一般的に解決されます 2つ以上のブロック要素を積み重ねる (ほとんどの場合div) 異なるサイズの 互いの上に。最初はこれは簡単な解決方法のようですが、レイアウトを複数回再利用したり、要素を移動したり、モバイル用にデザインを最適化したり、コードを維持したりする場合は、さらにイライラすることになります。. この記事では、これを使用したエレガントなCSSのみのソリューションを紹介します。 HTML要素は1つだけ 同じ効果を達成するために。このテクニックはアクセシビリティにも優れています。 背景画像をCSSにロードします, HTMLから分離された. この記事の終わりまでに、あなたはする方法を知っているよ 境界領域に背景画像を表示する を作成するために カットアウトボーダーデザイン あなたは以下を見ることができます。デザインをレスポンシブにする方法についても説明します ビューポートユニットを使う. CodePenのHONGKIAT(@hkdc)によるPen CSSカットアウトボーダーを参照してください。. 初期コード HTMLに関する唯一の要件は、 ブロック要素: する必要があります 再利用 の寸法(幅と高さ)とボーダー幅の値 div, 私はそれらを紹介しています...