W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

覚えておいて損はない、CSSのみで画像を円形や三角形に切り抜く方法

Border-width animation f... / CSSで画像を三角に切り抜く - Weblog ... / The Shapes of CSS他...全3件

円形に切り抜く場合は、border-radius: 50%;(より多くのブラウザーに対応する場合は、ピクセル数で記述)。border-widthの値を遷移させることで使って面白いエフェクトも。

Border-width animation fun - December 1st, 2011 | HTML5 and CSS3...

http://html5advent2011.digitpaint.nl/1/

三角形に切り抜く場合は、borderを使って三角形のマスクを作る。切り抜いた箇所の背景色は透過にはならないので、背景色とあわせる必要がある。

CSSで画像を三角に切り抜く - Weblog - hail2u.net

http://hail2u.net/blog/webdesign/cut-a-triangle-from-an-image-with-css.html

こちらは画像の切り抜きではないが、円形や三角形のほか星型やハート型などさまざまな形状の図形をCSSのみで実装している。コードサンプルはコピペするだけで使えるので覚えておいて損はない。

The Shapes of CSS

http://css-tricks.com/examples/ShapesOfCSS/
最終更新日:2012-01-30 (29,637 views)

関連するトピックス

ページ上部に戻る