div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。 augmented-ui augmented-ui -GitHub augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。 ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。

[coliss]

UI要素をさまざまな形状のデザインに拡張するスタイルシート。

[mayumayu_nimolove]

問題はここでブクマしても、いざ必要になると取り出せない事

[ywv]

どうやってpolygon()使って角丸させてるんだろうと思ったら、sincos使ってそれっぽく見せてた。すげえ執念。

[uva]

clip-path

[yoshi-na]

CSS clip-pathプロパティ こっちも参考: https://www.webprofessional.jp/introducing-css-clip-path-property/

[norando]

これそのまま使うかどうかはともかく、トリッキーな形状に対応したいときに参照するとめっちゃ参考になりそう。