📐

CSSで近似スーパー楕円 (Approximated superellipse by CSS)

2021/02/04に公開

スーパー楕円に近い形をCSSでシンプルに表現することができたので備忘録。

完全なスーパー楕円はCSSのみで実現するのは非常に難しく、Web上では擬似要素を用いて近似した形をつけるなどの手法でスーパー楕円を表現しているものが散見される。これらは曲線の接合部分が環境によっては不自然になったり、image要素などをマスクするのに使いづらかったりと問題点が多い。

この手法では、CSSのborder-radiusプロパティとtransformプロパティにより変形することで、擬似要素を用いない単一のdiv要素で近似スーパー楕円を表現している。

説明

斜めのスーパー楕円に見える図形をなんとかborder-radiusで描画できたので、transformのroteteプロパティにてまっすぐに見えるようにしている。

roteteしているので、image要素を配置してアイコンにする場合などは中の要素に対して逆向きのrotateを指定するとよい。

\left| \frac{x}{a} \right| ^{n} + \left| \frac{y}{b} \right| ^{n} = 1

$n$ ：スーパー楕円の丸みを決める値
$a,b$ ：大きさ

$n$ は $2$ のときが楕円（ $a=b$ なら正円）で、それより大きいほど長方形（ $a=b$ なら正方形）に近づく。理想的なスーパー楕円は $n=2.5$ とされているらしい。

薄い赤色でオーバーレイしているのが今回CSSで近似したスーパー楕円。 $n=2.3$ のスーパー楕円とほぼ同じことが確認できる。

\left| x \right| ^{n} + \left| y \right| ^{n} = 1

高度なことがしたければ大人しくJavaScriptかSVGを使う方が早い（戒め）