Non rectangular looking boxes in CSS

Question

Basically:

Is there a better way of achieving somethink like this

than by doing this

<h2><span class="black poly1">Lorem ipsum dolor</span><br/>
<span class="black poly2">sit amed</span></h2>

and

h2 {
    line-height: 50px;
}

.black {
    color: #fff;
    -moz-box-shadow: 3px 3px 0px 0px #C81928;
    -webkit-box-shadow: 3px 3px 0px 0px #C81928;
    box-shadow: 3px 3px 0px 0px #C81928;
    padding: 5px;
    margin: 20px;
}

.poly1 {
    background: url(http://metamonks.com/meta/poly1.svg);
    background-size: cover;
}

.poly2 {
    background: url(http://metamonks.com/meta/poly2.svg);
    background-size: cover;
    margin-left: 120px;
}

I've used SVG files, but that comes with some disadvantages:

• CSS drop shadow doesn't apply to shape but to bounding box
• not so simple to edit via code

I was thinking to placing very stretched triangles around the CSS box, but couldn't get it done properly. Should I best keep trying that (hints are very welcome!) or is there a more elegant solution for that?

Answer 1

Why not just add the dropshadow effect to (ie inside) the SVG files themselves?

<svg width="369px" height="60px" viewBox="0 0 369 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <path d="M73,41 L77,97 L435,97 L438,49 L73,41 Z" fill="red" transform="translate(4,4)"/>
   <path d="M73,41 L77,97 L435,97 L438,49 L73,41 Z"/>
</svg>

http://jsfiddle.net/cbx5P/2/

Answer 2

css3 3d transforms (cf. css transform on MDN and this tutorial) may help you. basically, you have to display two nested elements, one of which represents your shadow while the othe has your content.

define some offset for the inner element and apply a suitable 3d transform to the outer element.

basically your transform clause would look like this:

transform:  skewX(-5deg) skewY(-10deg) perspective( 600px ) rotateY( 45deg )   ; 

here you have a live example.

there are a couple of aspects to consider:

• you have to resort to 3d transforms to achieve the desired distortion effect from a 2d layer perpendicular to the normal of the 2d screen.

• some of the transforms need vendor prefixes.

• the transforms might not work across all user agents. the example has been tested on chrome 33 ( chrome 33.0.1750.154 ).

• the css shadow seem to not be subjected to the perspective transforms - therefore you'd need the nested structure. on platforms where these transforms were applied to the css adornments too, you'd save the nesting of elements.