CSS Shape cross browser support

[NoobSimon]

Hello,
The shape in the attached codepen is what I want to achieve but with cross browser support. Im really confused when using syntax like this:

‘border-left: 50px solid transparent; border-right: 50px solid transparent;’

http://codepen.io/aggressivedigital/pen/KprzPg

[Paulie_D]

‘border-left: 50px solid transparent; border-right: 50px solid transparent;’

It’s referring to CSS triangles which have cross browser support but can be janky at large sizes.

SVG is an option though.

[NoobSimon]

Thank you yet again Paulie_D. The end goal is to use that shape as a hero and to have an image inside it (dynamic) with text (dynamic) on top.

So if I use an SVG Clip would that be the best with browser support? or is there any other way of achieving this?

[NoobSimon]

I have created this but i think think its going to work as the image will always be skewed
http://codepen.io/aggressivedigital/pen/qdQZpg

[Paulie_D]

Well clip-path is supported by all major browsers except…IE although FF (I think) only works using the SVG URL variant.

http://caniuse.com/#feat=css-clip-path

If you can take IE not having the clip (which is not an unreasonable fallback) then I’d say ‘yes, it’s the most suppoted option’

[NoobSimon]

Is there any tool you could recommend for creating SVG’s?

[NoobSimon]

I have created this but i think think its going to work as the image will always be skewed
http://codepen.io/aggressivedigital/pen/qdQZpg

[Paulie_D]

Is there any tool you could recommend for creating SVG’s?

Sketch is supposed to be good. – http://bohemiancoding.com/sketch/

It’s for Mac only AFAIK …I have Illustrator in the office (I’m on Windows) but I’m sure there are many others.

[NoobSimon]

I have Sketch but it didn’t produce what I wanted for the SVG output.

I have manage to create this, how can I add an image background to cover it?
http://codepen.io/aggressivedigital/pen/MwzeWB

[Author]

Posts