Non straight edges… erm how?

[AnimalsAndOtherSuch]

I’m seeing a new trend of hero images with non straight bottoms (does that make sense?).

Example: http://themeforest.net/item/hexagone-psd-template/7790170

Presuming the source image is square on all sides, what is the best way to achieve this? An SVG mask?

[shaneisme]

Well the simple way to do it with full support to all browsers is just have an image do it for you :)

If you want to be fancy, look no further than a recent ALA article: http://alistapart.com/article/css-shapes-101

[Paulie_D]

Also: https://css-tricks.com/examples/ShapesOfCSS/

Well the simple way to do it with full support to all browsers is just have an image do it for you :)

So true…sometimes we get too fancy and think everything has to be a CSS shape when an image is so much easier.

Then again, I’m loving the way SVGs are taking shape (no pun intended) and they are incredibly flexible…and reusable..and customisable.

[magicspon]

You can use pseudo elements and css transforms to get this effect.

Here’s a little pen for you (using scss and compass)

http://codepen.io/magicspon/pen/HomuD

[nixnerd]

So true…sometimes we get too fancy and think everything has to be a CSS shape when an image is so much easier.

It’s funny you say that @Paulie_D. I know sometimes I could just open some image software and accomplish something in about 5 minutes. But… alas, I’ll spend an hour to do it the hard way because in my mind it’s more ‘legit.’

Then again, I’m loving the way SVGs are taking shape

This is true too. SVG and CSS were made for each other. Truly an awesome combo. Especially if you use the raw XML of the SVG and manipulate the hell out of it with CSS. It’s awesome.

I would say use SVG. It’s got pretty good support at this point.

[Author]

Posts