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

为内部元素定义一些偏移量，并对外部元素应用合适的 3d 变换。

基本上你的转换子句应该是这样的：

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

这里有一个live example。

有几个方面需要考虑：

• 您必须借助 3d 变换来从垂直于 2d 屏幕法线的 2d 图层中获得所需的失真效果。

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

• 转换可能不适用于所有用户代理。该示例已在 chrome 33 ( chrome 33.0.1750.154 ) 上进行了测试。

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