CSSでカットアウトボーダーデザインを作成する方法
とともに カットアウトボーダーデザイン 何が見つかるかをユーザーに示すことができます HTML要素の境界領域の下. このタスクは一般的に解決されます 2つ以上のブロック要素を積み重ねる （ほとんどの場合div） 異なるサイズの 互いの上に。最初はこれは簡単な解決方法のようですが、レイアウトを複数回再利用したり、要素を移動したり、モバイル用にデザインを最適化したり、コードを維持したりする場合は、さらにイライラすることになります。.
この記事では、これを使用したエレガントなCSSのみのソリューションを紹介します。 HTML要素は1つだけ 同じ効果を達成するために。このテクニックはアクセシビリティにも優れています。 背景画像をCSSにロードします, HTMLから分離された.
この記事の終わりまでに、あなたはする方法を知っているよ 境界領域に背景画像を表示する を作成するために カットアウトボーダーデザイン あなたは以下を見ることができます。デザインをレスポンシブにする方法についても説明します ビューポートユニットを使う.
初期コード
HTMLに関する唯一の要件は、 ブロック要素：
する必要があります 再利用 の寸法（幅と高さ）とボーダー幅の値 div, 私はそれらを紹介しています CSS変数として. 変数 --w を示します 幅 の .CB ブロック要素, --時間 そのを示します 高さ, --b のために行きます ボーダー幅, そして --b2 ボーダー幅に2を掛けたものです。後で、最後の変数が使用されるのがわかります。.
私はサイジング ユニット 背景を追加し、境界線、高さ、幅を設定して上記のコードを改善しましょう。 定義済みのCSS変数を使用して. これが、デモが現在どのようになっていると思われるかです。 背景画像が必要です の全域をカバー 背景画像を固定サイズにしたい場合は、指定したサイズが画面の境界領域を覆うように設定されていることを確認してください。 の 背景画像の幅 [ 同様に、 背景画像の高さ [ このようにして、背景画像のサイズを、 の 注意： にパディングを追加している場合 これは私たちが今持っているものです： 境界線を含む領域を背景画像で覆ったので、あとは 境界線の内側の中央領域を覆う （境界線のない領域）単色で 価値のある水平方向の影 Codepenデモでは、画像の周囲に白い枠線が見えます。の有名なトリックがあります ボックスシャドウを使用して複数の境界線を作成する-同じテクニックを使うことができます 1つ以上の単色の枠線を追加する 私たちのデザインへ. 更新しました の 最後のCodepenデモでは、背景画像とボックスシャドウカラーのコードを配置しました。 別のクラスに入れる. これは オプション, あなたがしたい場合は、非常に便利になることができます 切り取りボーダーデザインのレイアウトを再利用する 複数の要素で、各要素の美しさ（背景画像+色）を個別に追加する. というクラスを追加しました から の値を設定する 寸法は全てユニット内にありますので 注意： 忘れないで ビューポートメタタグを追加します。 モバイルビュー用に最適化することにした場合は、HTMLページに移動します。.vw 単位（必要に応じて固定単位を使用できます）. .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;
簡単な説明 -
vw そして VH 単位vw を表します 1/100番目 ビューポートの幅の. 例えば, 50vw ビューポート幅の50部分 垂直方向に100等分にスライス, しながら 50vh ビューポートの高さの50部分 水平方向に100等分にスライス. .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;背景：url（bg.jpg）;ボーダー：var（ - b）単色透明。高さ：var（ - h）;幅：var（ - w）;
背景画像のサイズを変更する
バックグラウンド 私がそれを与えている値： .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;背景：url（bg.jpg）center / calc（var（ - w）+ var（ - b 2））calc（var（ - h）+ var（ - b 2））;ボーダー：var（ - b）単色透明。高さ：var（ - h）;幅：var（ - w）;
calc（var（ - w）+ var（ - b2））]はの合計です divの幅 [var（ - w）] そしてその 左右の境界線の幅 [var（ - b2）].calc（var（ - h）+ var（ - b2））]はの合計です divの高さ [var（ - h）] そしてその 上下の境界線の幅 [var（ - b2）].div （国境地域を含む）.センター キーワード 背景画像を揃えます。 の中心に div.div, 覚えて パディング領域を含める 境界線領域と同じ背景サイズにも.
国境地域をカバーする
ボックスシャドウ 差し込み. .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;背景：url（bg.jpg）center / calc（var（ - w）+ var（ - b 2））calc（var（ - h）+ var（ - b 2））;ボーダー：var（ - b）単色透明。 box-shadow：インセットvar（ - w）0 0 rgba（0,120,237、.5）;高さ：var（ - h）;幅：var（ - w）;
var（ - w） の全幅をカバー div. の用法 RGBA 色機能は許します 透明度 ミックスに追加されますが、中心部を完全にカバーする場合は不透明色を使用することもできます。.
追加の境界線を追加する
ボックスシャドウボックスシャドウ 値は次のとおりです。 .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;背景：url（bg.jpg）center / calc（var（ - w）+ var（ - b 2））calc（var（ - h）+ var（ - b 2））;ボーダー：var（ - b）単色透明。ボックスシャドウ：インセットvar（ - w）0 0 rgba（0、120、237、.5）、0 0 0 calc（var（ - b）/ 2）白。高さ：var（ - h）;幅：var（ - w）;
calc（var（ - b）/ 2） 関数はの影を作ります ボーダー幅の半分.
オプション：別々のレイアウトと美学
.poster1 に .poster1 --tbgc：rgba（0,120,237、.5）;背景画像：URL（ "http://bit.ly/2eQBij2"）;
バックグラウンド 速記プロパティです。, その速記プロパティは個別に上書き/設定できます. 従って、私達は置くことができます 背景画像 に .poster1, からURLの値を削除します。 バックグラウンド のプロパティ .CB.ボックスシャドウ, 使用できます 別のCSS変数. の --TBGC 変数 カラー値を保持します ボックスシャドウ（デモではライトブルー）に与えたいのです。 .CB 我々 のカラー値を置き換える ボックスシャドウ とプロパティ var（ - tbgc）. .cb --w：35vw; - h：40vw。 - b：4vw。 - b2：calc（var（ - b）* 2）;背景：center / calc（var（ - w）+ var（ - b 2））calc（var（ - h）+ var（ - b 2））;ボーダー：var（ - b）単色透明。ボックスシャドウ：インセットvar（ - w）0 0 var（ - tbgc）、0 0 0 calc（var（ - b）/ 2）白。高さ：var（ - h）;幅：var（ - w）;
ポートレートモード用のコード
vw, そうなる 小さすぎる デザインを縦モード（高さに対して幅が狭い）で表示している場合 - すべてのモバイルデバイスはデフォルトで表示されます。この問題を解決するために, スイッチ vw と VH, そして デザインのサイズを変更する あなたがポートレートモードに合うと思うように. @media（向き：縦）.cb --w：35vh; - h：40vh。 - b：4vh。
