Angled headings in CSS - 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).)

Answer 3

Yes it is transform. Following css does it for -20 degrees. and a white shadow
.box {
-moz-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-webkit-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-o-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-ms-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-webkit-box-shadow: 10px 10px 5px 5px #ffffff;
-moz-box-shadow: 10px 10px 5px 5px #ffffff;
box-shadow: 10px 10px 5px 5px #ffffff;
}

Answer 4

In order to #SvenBieder answer, it is better to use something like this:
body {
background: #ddd;
}
h1 {
position: relative;
font-family: sans-serif;
color: #fff;
width: 400px;
margin: 20px;
padding: 5px;
}
/* In CSS3 it is ::before, but IE doesn't support this */
h1:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -5px;
z-index: -1;
background: #555;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
-webkit-box-shadow: 10px 10px 0px 3px #ffffff;
-moz-box-shadow: 10px 10px 0px 3px #ffffff;
box-shadow: 10px 10px 0px 3px #ffffff;
}
Live example: http://jsfiddle.net/fjPbr/1/
It's better because it don't skew the content and it has less code.