I have searched all over the internet for something that will answer my question or at least give me a starting point.I am wanting to create the below image in pure CSS if this is even possible:
The easiest way would be to create this effect with a background image or a sprite. However this will be a responsive website so the image won't scale very well and would potentially break, I also can't control the amount of text that will entered as this is a sidebar item that will also feature across the site as a button, search input and generic text.The website is already JavaScript-rich, so a non-JavaScript solution would be ideal. Plus I won't be dealing with the JavaScript.I am guessing heavy CSS gradient usage, but I'm unsure how to split the effect off into the four segments and ensure that it can scale downwards depending on the amount of text it will have.The 3d aspect of the box is something else I'll need to worry about at some point.Any help or pointers will be greatly appreciated.