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盒子周围放置非常拉伸的三角形，但无法正确地完成它。我应该继续尝试这个方法（非常欢迎提示！）还是有更优雅的解决方案？

- psteinweber

---

这里可能需要使用“tranform:skew”。 - Paulie_D

也许会有用，找到一个方向的属性，然后对大小进行调整。请参阅：http://www.css3maker.com/css3-transition.html# - Brandon Kiefer

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/

- Paul LeBeau

---

是的，使用内联SVG确实很方便，而且解决了我在项目要点中提到的两个问题。但它也有其他缺点（例如缓存），这就是为什么我会等一段时间才接受它作为“最佳解决方案”的原因。 - psteinweber

Answer 2

css3 3d transforms（参见MDN上的CSS变换和这个教程）可能会对你有所帮助。基本上，您需要显示两个嵌套元素，其中一个代表您的阴影，而另一个则是您的内容。

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

基本上，您的变换字句看起来会像这样：

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

这里有一个实时示例。

需要考虑几个方面：

• 你需要使用3D变换来获得所需的畸变效果，将2D层垂直于2D屏幕的法线。

• 一些变换需要供应商前缀。

• 变换可能无法在所有用户代理上正常工作。此示例已在Chrome 33 (Chrome 33.0.1750.154)上测试过。

• CSS阴影似乎不受透视变换的影响-因此您需要嵌套结构。在这些变换也应用于CSS修饰时，您可以节省元素的嵌套。

- collapsar

---

谢谢！但是对于移动原始矩形的两个角落进行3D变换（注意：底线与盒子布局/文本平行）似乎有点复杂。虽然这可能是没有SVG的唯一纯CSS方法，但我并不真的想实现它。 - psteinweber