CSSで作るおしゃれな境界線、背景スタイル／トップページ作成のアクセントにおすすめ

<div class="cstm-clip-upper-kaku"></div>

/* 三角形 上 */
.cstm-clip-upper-kaku {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 10vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   • clip-pathプロパティは、要素を特定の形にクリッピングするために使用されます。ここではpolygon関数で三角形を指定しています。
   • polygon(50% 0%, 0% 100%, 100% 100%)で、3つの頂点を持つポリゴン（三角形）を作成しています。それぞれの座標は次のように設定されています
     • 50% 0%: 要素の上辺中央（上端の中心）。
     • 0% 100%: 要素の左下端。
     • 100% 100%: 要素の右下端。
   • この配置により、要素の上側が中央に向かって尖った三角形にクリッピングされ、上向きの山形（上三角形）形状が作られます。
2. height: 10vw;
   • 高さをビューポート幅（vw）に応じて10%に設定しています。ビューポートの幅に比例するため、レスポンシブなデザインが可能です。
3. min-height: 5vw;
   • 最小の高さを5%のビューポート幅に設定しています。画面が小さくなったときでも、この高さ以下にはならないようにしています。

<div class="cstm-clip-lower-kaku"></div>

/* 三角形 下 */
.cstm-clip-lower-kaku {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  height: 10vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(100% 0, 0 0, 50% 100%);
   • clip-pathプロパティでポリゴン（三角形）を指定し、要素を切り取っています。polygon関数内で指定している座標は、三角形の3つの頂点を表します。
   • polygon(100% 0, 0 0, 50% 100%)の各座標は以下のように配置されます
     • 100% 0: 要素の右上端。
     • 0 0: 要素の左上端。
     • 50% 100%: 要素の下辺中央（下端の中心）。
   • この配置により、要素が下向きの山形（下三角形）にクリッピングされます。
2. height: 10vw;
   • ビューポート幅に応じて高さが10%に設定されます。レスポンシブに対応するため、ビューポートのサイズに応じて三角形の高さが変わります。
3. min-height: 5vw;
   • 最小高さを5%のビューポート幅に設定しており、画面が小さくなった場合でも高さが5vw以下にはならないようにしています。

<div class="cstm-clip-upper-r"></div>

/* 斜め（右上がりタイプ）／カラム上に追加用*/
.cstm-clip-upper-r {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  height: 5vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(100% 0, 0 100%, 100% 100%);
   • clip-pathプロパティでポリゴン（三角形）を指定し、要素の輪郭を切り取っています。このポリゴンには3つの頂点が指定されており、右上がりの斜めラインを形成します。
   • polygon(100% 0, 0 100%, 100% 100%)の各座標は以下のように設定されています
     • 100% 0: 要素の右上端。
     • 0 100%: 要素の左下端。
     • 100% 100%: 要素の右下端。
   • この配置によって、要素の上辺が右上がりにカットされた形状になります。
2. height: 5vw;
   • 高さをビューポート幅に対する5%で設定しています。これにより、要素がビューポートサイズに応じて伸縮するため、レスポンシブなデザインに対応します。
3. min-height: 5vw;
   • 最小の高さも5vwに設定しています。ビューポートが小さくなったときに高さが5vw以下に縮まらないように制限しています。

<div class="cstm-clip-lower-r"></div>

/* 斜め（右上がりタイプ）／カラム下に追加用*/
.cstm-clip-lower-r {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  height: 5vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(0 0, 0% 100%, 100% 0);
   • clip-pathプロパティでポリゴン（三角形）を指定し、要素を切り取っています。polygon関数で定義される3つの座標が、右上がりの斜めラインを作成します。
   • polygon(0 0, 0% 100%, 100% 0)の各座標は以下のように設定されています
     • 0 0: 要素の左上端。
     • 0% 100%: 要素の左下端。
     • 100% 0: 要素の右上端。
   • これらの点が結ばれることで、下側が右上がりにカットされた形状になります。
2. height: 5vw;
   • 高さをビューポート幅の5%に設定しています。これにより、ビューポートのサイズに応じて高さが変動し、レスポンシブデザインに対応します。
3. min-height: 5vw;
   • 最小高さも5vwに設定されています。画面が小さくなっても、この高さ以下にはならないようにしています。

<div class="cstm-clip-upper"></div>

/* 斜め（右下がりタイプ）／カラム上に追加用*/
.cstm-clip-upper {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  height: 5vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(0 0, 0 100%, 100% 100%);
   • clip-pathプロパティで要素の形をポリゴン（三角形）にクリッピングしています。この設定により、要素の上辺が右下がりの斜めラインにカットされます。
   • polygon(0 0, 0 100%, 100% 100%)の各座標は次の通りです
     • 0 0: 要素の左上端。
     • 0 100%: 要素の左下端。
     • 100% 100%: 要素の右下端。
   • この3つの頂点を結ぶことで、要素の上辺が左から右へ下がる斜めラインにカットされ、下辺が直線となる形状が作られます。
2. height: 5vw;
   • ビューポート幅の5%で要素の高さを設定しています。これにより、ビューポートサイズに応じたレスポンシブ対応が可能です。
3. min-height: 5vw;
   • 最小高さも5vwに設定されています。ビューポートが小さくなった場合でも、要素の高さが5vw以下にはならないようにしています。

<div class="cstm-clip-lower"></div>

/* 斜め（右下がりタイプ）／カラム下に追加用*/
.cstm-clip-lower {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  height: 5vw;
  min-height: 5vw;
  background-color:#D8E4E5;/*背景色*/
}

各プロパティの解説

1. clip-path: polygon(100% 0, 0 0, 100% 100%);
   • clip-pathプロパティを使用して、ポリゴン（三角形）の形で要素を切り取っています。
   • polygon(100% 0, 0 0, 100% 100%)の各座標は次の通りです
     • 100% 0: 要素の右上端。
     • 0 0: 要素の左上端。
     • 100% 100%: 要素の右下端。
   • これにより、要素の上辺が直線で、下辺が左から右に向かって下がる斜めラインでカットされた形状になります。
2. height: 5vw;
   • 要素の高さをビューポート幅の5%に設定しています。ビューポートに対して相対的に調整されるため、レスポンシブデザインに対応します。
3. min-height: 5vw;
   • 最小高さも5vwに設定しているため、画面が小さくなっても5vw以下には縮小されないように制限しています。

<div class="bg-diagonal"></div>

/* 斜めの背景 */
.bg-diagonal {
	--bg-color:#D8E4E5;
	--white: #fff;
	background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}

各プロパティの解説

1. --bg-color: #D8E4E5; と --white: #fff;
   • CSSカスタムプロパティ（変数）として背景色と白色を定義しています。これにより、これらの色をlinear-gradient内で参照することができます。
2. background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
   • linear-gradientを使用して、-45度の斜め方向にグラデーションがかかるように指定しています。
   • 各色の位置は以下の通りです
     • var(--bg-color) 0%：--bg-colorで設定された色が開始地点（0%）に適用されます。
     • var(--bg-color) 60%：--bg-colorの色が60%の位置まで適用されます。
     • var(--white) 50%：ここで白に切り替わり、50%の位置から白に変わります。
     • var(--white) 100%：白が100%の位置まで適用され、背景の残り部分が白で覆われます。

<div class="gradation"></div>

/* 背景にぼかしたグラデーション */
.bg-gradation {
	--bg-color:#D8E4E5;
	--white: #fff;
	background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 50%, var(--white) 70%, var(--white) 100%);
}

各プロパティの解説

1. --bg-color: #D8E4E5; と --white: #fff;
   • CSSカスタムプロパティ（変数）を使い、2つのカラー変数を設定しています。これにより、複数の場所でこの色を変更することなく一貫して使用できます。
2. background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 50%, var(--white) 70%, var(--white) 100%);
   • linear-gradientで、斜め（-45度）の方向に徐々に色が変わるように設定しています。
   • 各色の位置は以下の通りです：
     • var(--bg-color) 0%: --bg-colorの色がグラデーションの開始地点（0%）に適用されます。
     • var(--bg-color) 50%: --bg-colorが50%の位置まで持続し、ここまでが色の濃い部分になります。
     • var(--white) 70%: 50%から70%の間で徐々に白色へ変化し、ぼかしがかかったような効果を生み出しています。
     • var(--white) 100%: 白色が100%の位置まで適用され、背景の残り部分が白で覆われます。

<div class="bg-square"></div>

/* 直角にした背景 */
.bg-square {
	--bg-color:#D8E4E5;
	--white: #fff;
	background-image: linear-gradient(-90deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}

各プロパティの解説

1. --bg-color: #D8E4E5; と --white: #fff;
   • CSSカスタムプロパティ（変数）を使って色を定義しています。--bg-colorは薄い青緑色で、--whiteは白です。
2. background-image: linear-gradient(-90deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
   • linear-gradientで直線的に色が変化するグラデーションを設定しています。
   • -90degは水平方向にグラデーションを適用することを意味しています（左から右へのグラデーション）。
   • 色の変化が次のように指定されています
     • var(--bg-color) 0%: --bg-color（薄い青緑色）がグラデーションの開始地点（0%）に適用されます。
     • var(--bg-color) 60%: --bg-colorの色が60%の位置まで続きます。
     • var(--white) 50%: 50%から白色（--white）に切り替わります。この部分で少し不自然に見えるかもしれません。実際には、50%から白が始まるので、グラデーションが少し逆転しています。
     • var(--white) 100%: 白色が100%の位置まで適用され、背景の残りの部分が白になります。

<div class="clip-path-img-1"></div>

/*三角形に切り取り-1*/
.clip-path-img-1{
	clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}

<div class="clip-path-img-2"></div>

/*三角形に切り取り-2*/
.clip-path-img-2{
	clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
}

<div class="clip-path-img-3"></div>

/*斜めに切り取り-1*/
.clip-path-img-3{
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

<div class="clip-path-img-4"></div>

/*斜めに切り取り-2*/
.clip-path-img-4{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}