Possible to achieve a “cut” image look using only CSS3?

Referring to the kind of look of the images seen on this site – http://sl.dream-theme.com/html/albums-light.html
(I’m in no way involved with this WP theme, just providing an example). The author is using jRaphael to create “path cuts” which is a nice and browser-safe approach, but I’d like to avoid including an additional library solely for that purpose.

Problem courtesy of: Staffan Estberg


very basic:


uses css pseudo elements to mask the image (pretty descent browser support — will render as a square image in legacy browsers, probably nbd?)

If shadows / borders / things are needed you could add and additional wrapper to fake the slanted borders using more pseudo elements or a manipulated (transformed) box, or something.

Solution courtesy of: Thomas

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Possible to achieve a “cut” image look using only CSS3?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录