Is this even possible? How would you code it?

[ryanhayden]

So a client gave me this design:

The idea is that when a style is picked, the background image will change – easy. The problem is the little dove tail in the middle. It has to change dynamically as well – and stay centered.

I’ve got nothing. Short of having 15 different background images for every possible combination. I don’t know how to accomplish this.

Any of you awesome pros have any ideas?

[Beverleyh]

Maybe clip-paths are an option? https://css-tricks.com/almanac/properties/c/clip/

There are various generators online to help you too http://bennettfeely.com/clippy/

[JeroenR]

Yes and maybe take a look at the solution posted in an earlier question: https://css-tricks.com/forums/topic/separate-content-panels-with-caret-and-drop-shadow/

[Author]

Posts