Angled headings in CSS

Question

Does anyone have any ideas to achieve this angled heading effect with CSS only?

The box shadow shouldn't be a problem using a generator like this, but I'm unsure on the angled edges - perhaps CSS3's transform?

Answer 1

Write this:

h1{
    font-size:24px;
    display:inline-block;
    position:relative;
    margin:20px;
}
h1:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:-10px;
    right:-10px;
    background:red;
    z-index:-1;
    -moz-transform: skew(-25deg);
   -webkit-transform: skew(-25deg);
    box-shadow:3px 3px 0 0 #000;
    -moz-box-shadow:3px 3px 0 0 #000;
    -webkit-box-shadow:3px 3px 0 0 #000;
}

Check this http://jsfiddle.net/RP356/

Answer 2

You can achieve that with just transform:skew():

transform:skew(-30deg,0);
-ms-transform:skew(-30deg,0); /* IE 9 */
-moz-transform:skew(3-0deg,0); /* Firefox */
-webkit-transform:skew(-30deg,0); /* Safari and Chrome */
-o-transform:skew(-30deg,0); /* Opera */

As you can see here.

P.S. However keep in mind the “Heading” text and the skewed part have to be separate elements to avoid affecting the text too.

(In case the text is a child, you could set it straight using the opposite transformation: transform:skew(30deg,0).)