css - CSS 中的倾斜标题

Question

有没有人有任何想法可以仅使用 CSS 来实现这种倾斜的标题效果？

使用像 this 这样的生成器，盒子阴影应该不是问题，但我不确定倾斜的边缘 - 也许是 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/