StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The real problem here is using CSS borders to hack shapes.</p> <p>If you want to do what you're asking, you need to be using a better solution -- ie create shapes using real graphics (probably SVG or Canvas) rather than faking it in CSS. CSS shapes are very limited, and only really useful for showing off the fact the CSS can do them at all. They're not really much use in practice.</p> <p>My suggestion would be SVG. SVG is a vector graphics format that can be embedded in an HTML page, and would be a far better solution to your question. You can easily create an element of any shape you want, and fill it with an image. The only down-side of SVG is that it isn't supported by older browsers (IE8, for example), but this can easily be worked around, as IE8 supports an alternative format called VML. Several Javascript libraries exist that will work with either SVG or VML</p> <p>I recommend you look up a library called <a href="http://raphaeljs.com/" rel="nofollow">Raphael</a>. See the examples on their site for some of the things you can do. It's all really pretty easy. You will need to learn some new syntax, but once you've got the basics, you'll be amazed at what you can achieve.</p> <p>[EDIT] I've just seen your edit to the question with the JSFiddle example of what you're trying to do.</p> <p>The reason the JSFiddle doesn't work is because the shape you're seeing with the grey background is made up of the borders. Box borders are displayed on top of box content. In your case, the box borders take up the entirety of the box itself,so your grey borders are all you get to see. The image is loaded but hidden behind the box. I'll repeat what I said originally: CSS Shapes are not a good solution for anything other than simple hacks. Use SVG if you want a robust solution.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload