CSS3は、欠けた角の長方形、折り畳まれた角の長方形、欠けた角の境界線を実装しています。

序文

数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場所をブロックする絶対配置の疑似要素を作成するか、UI 担当者に相談することでした。突然、あるアイデアが頭に浮かび、以前読んだ「CSS Revealed」という本を思い出しました。この章があることを思い出したので、この記事を書きました。

さっそく、レンダリングをまずお見せしましょう。

欠けている角

1. 擬似要素の実装

<div class="bg カバー"></div>

.bg{
  幅: 120ピクセル;
  高さ: 80px;
  背景: #58a;
} /* 以下の要素はすべてこのスタイルを使用します*/

。カバー{
    位置: 相対的;
}
.cover::before {
    コンテンツ： '';
    幅: 0;
    高さ: 0;
    位置: 絶対;
    右: 0;
    下部: 0;
    境界線: 5px 実線 #fff;
    境界線上部の色: 透明;
    左境界線の色: 透明;
}
.cover::after{
    コンテンツ： '';
    幅: 0;
    高さ: 0;
    位置: 絶対;
    左: 0;
    上: 0;
    境界線: 5px 実線 #fff;
    境界線下部の色: 透明;
    右境界線の色: 透明;
}

疑似要素を使用して背景と同じ色の三角形を描画し、以下に示すように、それをブロックする必要がある場所に絶対配置します。ただし、これにより欠落する角は 2 つだけです。

2. 段階的な導入

CSS構文

背景画像: 線形グラデーション(方向、カラーストップ1、カラーストップ2、...);

価値	説明する
方向	角度値を使用して、グラデーションの方向 (または角度) を指定します。
カラーストップ1、カラーストップ2、...	グラデーションの開始色と終了色を指定するために使用されます。

また、グラデーションは方向として角度（45 度など）を受け入れることができ、カラーストップの位置情報は絶対的な長さの値にすることもできます。

45度: 左下から右上への方向を示します

-45度: 右下から左上への方向を示します

......

<div class="bg ミス角度"></div>

.ミス角度{
    背景: linear-gradient(-45度、透明10px、#58a 0);
}

複数の角度を実現

<div class="bg rect"></div>

.rect{
  背景: linear-gradient(135度、透明10ピクセル、#58a 0) 左上、
          線形グラデーション(-135度、透明10ピクセル、#58a 0) 右上、
          linear-gradient(-45度、透明10ピクセル、#58a 0) 右下、
          linear-gradient(45度、透明10px、#58a 0) 左下;
  背景サイズ: 50% 50%;
  背景繰り返し: 繰り返しなし;
  /* Internet Explorer 9 以前のバージョンではグラデーションはサポートされていません。 */
}

これは実際には4つのグラフィックで構成されています。以下をご覧ください。

background-size: 50% 50%; は、各小さなグラフィックの幅が 50%、高さが 50% であることを意味します。

アークカットコーナー

<div class="bg 円"></div>

.cricle{
  背景: 放射状グラデーション(左上の円、透明 10px、#58a 0) 左上、
          放射状グラデーション(右上の円、透明10px、#58a 0) 右上、
          放射状グラデーション(右下の円、透明10px、#58a 0) 右下、
          放射状グラデーション(左下の円、透明10px、#58a 0) 左下;
  背景サイズ: 50% 50%;
  背景繰り返し: 繰り返しなし;
}

最後に、Internet Explorer 9 以前ではグラデーションはサポートされていません。

ここで問題があります。ブラウザを引っ張って幅が圧縮され、定義された幅よりも小さくなると、白い隙間が現れることがあります。次の図に示すように、これには注意が必要です。

背景画像が写真の場合、角が欠けているとグラデーションがうまく機能しません。次に、clip-pathを使用してください。

クリップパスの実装

clip-path CSS プロパティは、要素の一部のみが表示されるクリッピング領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。

クリップパス: ポリゴン(xy, x1 y1, x2 y2, x3 y3, ...)

xy、x1 y1、x2 y2、x3 y3、... これらは座標軸上の点を表します。すべての点に基づいて閉じた図形を描きます。

<div class="bg rect-clip"></div>

.rect-clip{
  背景画像: url(./im.jpg);
  背景サイズ: 100% 100%;
  背景繰り返し: 繰り返しなし;
  クリップパス: ポリゴン(15px 0, 計算(100% - 15px) 0, 100% 15px, 
    100% 計算(100% - 15px)、計算(100% - 15px) 100%、
    15px 100%、0 計算(100% - 15px)、0 15px)
}

効果画像:

合計幅は120ピクセルです
計算(100% - 15px) => 105px
100% => 120ピクセル

対応する点をつなげて欠けている角の四角形を形成する

クリップパスの機能は非常に強力です。ダイヤモンドや五芒星など、さまざまな形状を描くことができます。

<div class="bg clip5"></div>

.clip5{
  	左マージン: 30px;
    /*クリップパス: inset(25% 0 25% 0 round 0 25% 0 25%);*/
    clip-path: inset(0 round 0 25%); /* 省略可能*/
    /* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
    /* inset は 4 つの値 (「上、右、下、左」の順序に対応) を使用して角の半径を設定します。 */
}

アニメーション用

<div class="line-box">
	<div class="line line1"></div>
	<div class="line line2"></div>
	<div class="line line3"></div>
</div>

.line-box{ 	
	幅: 100ピクセル;
	高さ: 60px;
}
。ライン{
	幅: 100%;
	高さ: 100%;
	背景: #26b91a;
}
.line1{
	-webkit-clip-path: ポリゴン(80% 0, 40% 40%, 80% 80%);
	クリップパス: ポリゴン(80% 0, 40% 40%, 80% 80%);
	アニメーション: 2秒 1秒 無限;
}
.line2{
	クリップパス: ポリゴン(10% 10%, 60% 40%, 50% 90%);
	アニメーション: b 2s 1s 無限;
}
.line3{
	クリップパス: ポリゴン(20% 20%, 30% 20%, 30% 50%, 20% 50%);
	アニメーション: c 2s 1s 無限;
}
@keyframes{
	90% {
		背景: #1f351f;
	}
	100% {
		クリップパス: ポリゴン(50% 40%, 25% 100%, 75% 100%);
	}
}
@keyframes b{
	90% {
		背景: #1f351f;
	}
	100% {
		クリップパス: ポリゴン(50% 0, 0% 100%, 100% 100%);
	}
}
@キーフレーム c{
	90% {
		背景: #1f351f;
	}
	100% {
		クリップパス: ポリゴン(40% 0, 60% 0, 60% 100%, 40% 100%);
	}
}

ここで紹介しているのはclip-pathの機能の一部です。もっと多くの図形を見たい場合は、こちらをクリックしてください。様々な図形（ドラッグアンドドロップによる任意のカスタマイズも含む）を生成したり、直接コードを生成したりできるウェブサイトです。

さまざまな図形を描画できますが、互換性はあまり良くありません。Googleバージョン79とFirefox 71では問題なく動作しますが、IEでは動作しません。具体的な互換性については、こちらをご覧ください。

プロジェクトで互換性の問題を考慮する必要がある場合は、背景画像として画像を配置したり、画像を圧縮したり、最大で 2 つの角だけが欠けている疑似要素を使用したりすることもできます。実際の状況に応じて、プロジェクトに適したソリューションを選択してください。

角の境界線がありません

<div class="out-rect">
<div class="in-rect"></div>
</div>

.out-rect {
上マージン: 30px;
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの中央揃え: 中央;
幅: 200ピクセル;
高さ: 80px;
パディング: 5px;
背景: linear-gradient(-45deg, transparent 10px, #58a 0) 右上;
背景サイズ: 100% 100%;
背景繰り返し: 繰り返しなし;
}
.in-rect{
幅: 100%;
高さ: 100%;
背景: linear-gradient(-45度、透明8px、#fff 0) 右上;
背景サイズ: 100% 100%;
背景繰り返し: 繰り返しなし;
}

効果は以下のとおりです。

欠けている2つの角の長方形を重ねた効果。内側の長方形の幅と高さは親divのサイズに従います。垂直方向に中央に保たれている限り、パディング値は最終的にレンダリングされた境界の幅になります。

折り角

線形グラデーションを引き続き使用し、欠けている角の四角形に基づいて追加の角があります。

効果図は以下のとおりです。

まず最初に実装する

<div class="bg 折りたたみ角度"></div>

.bg{
  幅: 120ピクセル;
  高さ: 80px;
  背景: #58a;
}
.折りたたみ角度{
	背景：
		線形グラデーション(左下、透明度50%、RGBA(0, 0, 0, 0.4) 0) 繰り返しなし 100% 0 / 1.4em 1.4em、
	    線形グラデーション(-135度、透明1em、#58a 0);
}

レンダリング

線形グラデーション(左下、透明度50%、RGBA(0, 0, 0, 0.4) 0) 繰り返しなし 100% 0 / 1.4em 1.4em
左下に向かって、半分透明で半分黒のグラデーションを描きます。位置: 100% 0 サイズ: 1.4em 1.4em

次のように：

サイズは1.4em 1.4em この三角形は、直角が1.4em、斜辺が1.4/√2 ≈ 1の45°直角三角形です。

1emの欠けた角を持つ長方形を描きます

線形グラデーション(-135度、透明1em、#58a 0)
-135度 左下に向かって欠けた角の四角形を描く

2 つのグラデーションが重なり合うため、効果は次のようになります。

必ず最初に小さな三角形を描き、次に欠けている角の長方形を描いてください。そうしないと、長方形が小さな三角形を覆ってしまいます。

右下隅

<div class="bg foldingAngle2"></div>

.折り曲げ角度2{
	背景：
		線形グラデーション(左上、透明度50%、RGBA(0, 0, 0, 0.4) 0) 繰り返しなし 100% 100% / 1.4em 1.4em、
	    線形グラデーション(-45度、透明1em、#58a 0);
}

これは少し非現実的に見えますし、実際には角度が常に 45° になるわけではありません。

下に30°の角度を描き、最初に欠けている角の長方形を描きます

<div class="bg foldingAngle2"></div>

.折り曲げ角度2{
	上マージン: 30px;
    位置: 相対的;
    境界線の半径: .3em;
	背景: linear-gradient(-150deg, transparent 1em, #58a 0);
}

次に角を描きます

上の図の赤い数字によると、角の幅は 2/√3 ≈ 1.15em です。長さ: 2em。角を描きます。

.foldingAngle2::before{
	コンテンツ： '';
	位置: 絶対;
	右: 0;
	上: 0;
	幅: 1.15em;
	高さ: 2em;
	背景: linear-gradient(左下へ、透明 50%、rgba(0, 0, 0, 0.2) 0、rgba(0, 0, 0, 0.3)) 100% 0 繰り返しなし;
	境界線の左下の半径: 継承;
}

試してみよう

.foldingAngle2::before{
	コンテンツ： '';
	位置: 絶対;
	右: 0;
	上: 0;
	幅: 1.15em;
	高さ: 2em;
	背景: linear-gradient(左下へ、透明 50%、rgba(0, 0, 0, 0.2) 0、rgba(0, 0, 0, 0.3)) 100% 0 繰り返しなし;
	変換: 回転(-30度);
	transform-origin: bottom right; /* 三角形の右下隅を回転の中心にする*/
}

少し上に移動して、オフセットは2-1.15=0.85emで、影を追加します。

.foldingAngle2::before{
	コンテンツ： '';
	位置: 絶対;
	右: 0;
	上: 0;
	幅: 1.15em;
	高さ: 2em;
	背景: linear-gradient(左下へ、透明 50%、rgba(0, 0, 0, 0.2) 0、rgba(0, 0, 0, 0.3)) 100% 0 繰り返しなし;
	変換: translateY(-0.85em) 回転(-30deg);
	transform-origin: 右下;
	ボックスの影: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
	border-bottom-left-radius: inherit; /* 左下隅は border-radius を継承します */
}