CSS中的非矩形外观框

Question

基本上：

有没有更好的方法来实现这样的想法

而不是this

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

和

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

我使用过SVG文件，但这有一些缺点：

• CSS投影不适用于形状，但适用于边界框
• 通过代码编辑不是那么简单

我在考虑在CSS框周围放置非常拉伸的三角形，但无法正确完成。我应该最好继续尝试（提示非常受欢迎！）还是有更优雅的解决方案？

Answer 1

为什么不直接在SVG文件本身（即内部）添加阴影效果？

<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三维变换（参见css transform on MDN和this tutorial）可能会对您有所帮助。基本上，你必须显示两个嵌套元素，其中一个代表你的影子，而另一个代表你的内容。

为内部元素定义一些偏移量，并将合适的三维变换应用于外部元素。

基本上你的转换子句看起来像这样：

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

这里有一个live example。

有几个方面需要考虑：

• 你必须求助于 3d 变换才能从垂直于2d画面法线的2d层获得所需的失真效果。

• 某些转换需要供应商前缀。

• 转换可能无法在所有用户代理中运行。该示例已在chrome 33（chrome 33.0.1750.154）上进行了测试。

• css阴影似乎没有受到透视变换的影响 - 因此你需要嵌套结构。在将这些转换应用于css装饰的平台上，您将保存元素的嵌套。