円形、楕円形、波形... で表現できる形状のすべて

CSS Miscellaneous の <basic-shape> は、円形や楕円形などの基本的な形状を生成するプロパティです。従来の画像や SVG を用いる方法と比べて軽量で柔軟なデザインを実現できます。この解説では、<basic-shape> の基本的な使い方から、応用的な表現まで、分かりやすくご紹介します。

<basic-shape> は、以下の 2 つのプロパティで構成されています。

• shape-outside: 要素の外側の形状を指定します。
• shape-image-threshold: 画像を形状に切り抜く際の閾値を指定します。

基本的な形状の生成

shape-outside プロパティを用いることで、以下の基本的な形状を生成できます。

• circle: 円形
• ellipse: 楕円形
• inset: 内側の余白を指定
• polygon: 点の座標を指定して多角形

例：円形

.circle {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

上記コードは、100px 四方の要素を、半径 50px の円形に切り抜きます。

画像の切り抜き

shape-image-threshold プロパティを用いることで、画像を形状に切り抜くことができます。

例：画像を円形に切り抜く

.image-circle {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background-image: url(image.jpg);
  shape-image-threshold: 0.5;
}

上記コードは、image.jpg を半径 50px の円形に切り抜き、shape-image-threshold プロパティで閾値を 0.5 に設定することで、半透明な効果を適用します。

応用的な表現

shape-outside と shape-image-threshold プロパティを組み合わせることで、様々な形状を生成できます。

例：波形

.wave {
  shape-outside: repeating-linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    #000 10%,
    #000 20%,
    transparent 20%,
    transparent 30%
  );
  width: 100px;
  height: 100px;
  background-color: blue;
}

上記コードは、repeating-linear-gradient を用いて波形を生成し、shape-outside プロパティで要素に適用します。

ブラウザ対応状況

<basic-shape> は比較的新しいプロパティであり、すべてのブラウザで対応しているわけではありません。最新の情報は、Can I Use: https://caniuse.com/ などのサイトで確認できます。

まとめ

CSS Miscellaneous の <basic-shape> は、軽量で柔軟なデザインを実現できる強力なツールです。基本的な使い方から応用的な表現まで、理解を深めることで、Web デザインの可能性を広げることができます。

<basic-shape> サンプルコード

• 円形

.circle {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

• 楕円形

.ellipse {
  shape-outside: ellipse(50% 25%);
  width: 100px;
  height: 100px;
  background-color: blue;
}

• 多角形

.polygon {
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 100px;
  height: 100px;
  background-color: green;
}

画像の切り抜き

• 画像を円形に切り抜く

.image-circle {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background-image: url(image.jpg);
  shape-image-threshold: 0.5;
}

.image-star {
  shape-outside: polygon(50% 0%, 62.5% 35.4%, 79.3% 35.4%, 68.8% 57.7%, 80% 100%, 50% 70.7%, 20% 100%, 31.2% 57.7%, 10.7% 35.4%, 37.5% 35.4%);
  width: 100px;
  height: 100px;
  background-image: url(image.jpg);
  shape-image-threshold: 0.5;
}

応用的な表現

• 波形

.wave {
  shape-outside: repeating-linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    #000 10%,
    #000 20%,
    transparent 20%,
    transparent 30%
  );
  width: 100px;
  height: 100px;
  background-color: blue;
}

• 三角形のマスク

.triangle-mask {
  shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
  width: 100px;
  height: 100px;
  background-color: red;
  overflow: hidden;
}

.triangle-mask img {
  width: 200px;
  height: 200px;
}

• グラデーションと組み合わせた円形

.gradient-circle {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, red 0%, blue 100%);
}

これらのサンプルコードはあくまでも参考例です。<basic-shape> の可能性は無限大です。ぜひ、様々なアイデアを試して、Web デザインの可能性を広げてください。

<basic-shape> 以外の方法

border-radius プロパティは、要素の角丸半径を指定します。円形や楕円形に近い形状を生成できます。

例：円形

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

clip-path プロパティは、要素の表示領域を指定します。SVG パスを用いて、様々な形状を生成できます。

例：三角形

.triangle {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  width: 100px;
  height: 100px;
  background-color: red;
}

::before / ::after 疑似要素を用いて、コンテンツの後に別の要素を挿入できます。この要素に border-radius や clip-path を適用することで、形状を生成できます。

例：星形

.star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  clip-path: polygon(50% 0%, 62.5% 35.4%, 79.3% 35.4%, 68.8% 57.7%, 80% 100%, 50% 70.7%, 20% 100%, 31.2% 57.7%, 10.7% 35.4%, 37.5% 35.4%);
  background-color: red;
}

画像

円形や四角形などの単純な形状であれば、画像を用いることもできます。

例：四角形

<img src="square.png" width="100" height="100">

比較

それぞれの方法にはメリットとデメリットがあります。

どの方法を選択するかは、形状の複雑さやブラウザ対応状況、ファイルサイズなどを考慮して決定する必要があります。