CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(

[teppeis]

linear-gradientを使った多角形の切り抜きとradial-gradientによる角丸。

[izumin5210]

グラデーションなるほど 擬似要素で三角形かさねまくるよりスマート？ パフォーマンス的にはどうなんだろう

[kasumani]

CSSで画像を六角形にくり抜く Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転

[oppara]

CSSで画像を六角形にくり抜く - Weblog - http://t.co/IYL85F6mMu

[emj1025]

ccsで六角形

[ku_marin]

Swarmの六角形かわいい