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(
![CSSで画像を六角形にくり抜く - Weblog - Hail2u.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/e32bc28ae4aa39958bd5cc59feb935098add6ae7/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Fcss-hex-clip.png)