気持ちぃ〜角丸 Squircles by ryu

その角丸、本当に納得していますか？
Apple製品のアイコンやハードウェアの曲線がどこか「気持ちよく」感じる理由。それは単純な円弧（border-radius）ではなく、直線から曲線へと曲率が滑らかに変化する形状が使われているからです。こうした形状は一般にSquircleなどと呼ばれ視覚的な自然さを生み出しています

これまでWebでこのような角丸を再現するには、SVGマスクやclip-pathなどを用いた実装が必要でメンテナンス性に課題がありました
しかし現在CSS Backgrounds and Borders Module Level 4において、corner-shapeプロパティが提案されておりCSSネイティブで表現できる未来が見え始めています。

本LTでは以下の内容についてお話しします。

• なぜ border-radius の角丸は硬く見え、Squircleは「気持ちよく」感じられるのか
• 提案されているCSS仕様corner-shapについて

たかが角丸、されど角丸。
フロントエンドエンジニアのこだわりを、CSS がどこまで表現できるようになるのか。その一端を一緒に覗いてみませんか？