ジグソーパズルのピースをCSSで表現する方法について解説します。
クリッピングパスやカスタムシェイプを使うのがポイントです。clip-pathを使うと、複雑な形状を簡単に切り抜くことができます。しかし、ジグソーパズルのピースは半円形の凸凹が特徴的なので、polygon()を使うのは難しいです。
代わりに、こちらの回答で紹介されているように、SVGのpathを使う方法がおすすめです。pathのコマンドは直感的に理解しにくいことがありますが、svg-path-editorのようなSVGエディタを使えば簡単に編集できます。
以下のコード例では、SVGを使ってジグソーパズルの描画できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ジグソーパズルのピース</title>
<style>
.svg {
position: absolute;
width: 0;
height: 0;
}
.clipped {
width: 100px;
height: 100px;
background: red;
clip-path: url(#my-clip-path);
margin-right: -48px;
margin-top: -8px;
}
</style>
</head>
<body>
<div class="clipped"></div>
<svg class="svg">
<defs>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0.759 0.525V0.343c0-0.027-0.021-0.048-0.045-0.048h-0.196c-0.009 0-0.017-0.005-0.021-0.013c-0.004-0.008-0.005-0.018 0-0.026c0.011-0.021 0.017-0.045 0.017-0.07c0-0.08-0.06-0.145-0.134-0.145c-0.074 0-0.134 0.065-0.134 0.145c0 0.025 0.006 0.049 0.017 0.07c0.004 0.008 0.004 0.018 0 0.026c-0.004 0.008-0.012 0.013-0.021 0.013H0.045c-0.025 0-0.045 0.021-0.045 0.048v0.169c0 0.009 0.005 0.018 0.012 0.023c0.007 0.005 0.017 0.005 0.024 0.001c0.019-0.011 0.041-0.017 0.064-0.017c0.074 0 0.134 0.065 0.134 0.145c0 0.08-0.06 0.145-0.134 0.145c-0.023 0-0.045-0.006-0.064-0.017c-0.008-0.004-0.017-0.004-0.024 0.001C0.005 0.796 0 0.805 0 0.814v0.179c0 0.027 0.02 0.048 0.045 0.048h0.669c0.025 0 0.045-0.022 0.045-0.048v-0.183z"/>
</clipPath>
</defs>
</svg>
</body>
</html>
CSSとSVGを組み合わせてジグソーパズルのピースを表現しています。具体的には、clip-pathを使用して、赤い四角形を特定の形状に切り抜いています。
まず、<style>内で、.svgクラスは非表示のSVG要素のスタイルを設定しています。一方、.clippedクラスは、100x100ピクセルの赤い背景を持つ要素を定義し、その要素をclip-pathプロパティで指定された形状にクリップします。
clip-path: url(#my-clip-path);によって、SVG内に定義された<clipPath>が参照されます。この<clipPath>は、id="my-clip-path"で識別され、その中に含まれる要素によってジグソーパズルピースの形状が定義されています。
<path>要素のd属性は、パスのコマンドを記述しており、パズルピースの特定の形状を描きます。MやVなどのコマンドで、パスの移動や線、曲線を描画し、その形状がクリップの輪郭として使用されます。
最終的に、HTMLの<div>要素に.clippedクラスが適用され、指定されたパス形状に従って赤いジグソーパズルピースの形状が表示されます。
まとめ
このように、CSSとSVGを組み合わせることで、ウェブ上で複雑な形状を表現することが可能です。特に、ジグソーパズルのピースのように、標準的なCSSのボックスモデルでは表現しにくい形状も、clip-pathやpathコマンドを使えば、簡単に実装できます。
また、この手法は例えば、Flutterでの実装にも応用できます。Flutterでは、CustomPaintやClipPathを使って同様の形状を描画することが可能ですが、Pathクラスを利用すれば、細かいコントロールが可能で、ジグソーパズルのピースのような複雑な形状も描画できます。svgというリソースを転用できるので、モバイルアプリでもデザインの一貫性を保つことができます。