CSS中的角度标题

Question

有没有人有任何想法只用CSS实现这种角度标题效果？

有角度的标题http://f.cl.ly/items/3P1X1t0V0y2j0Z1T3B1Q/angled-heading.png

使用像这样的生成器,盒子阴影不应该是一个问题,但我不确定角度边缘 - 也许是CSS3的变换？

Answer 1

写这个:

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;
}

检查这个http://jsfiddle.net/RP356/