Html CSS中的非矩形外观框

基本上：

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

而不是通过做

我曾经使用过SVG文件，但它也有一些缺点：

• CSS放置阴影不应用于形状，而是应用于边界框
• 通过代码编辑并不是那么简单

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

css3 3d transforms（参见和）可能会对您有所帮助。基本上，您必须显示两个嵌套元素，其中一个表示您的阴影，另一个表示您的内容

为内部图元定义一些偏移，并对外部图元应用适当的三维变换

基本上，您的transform子句如下所示：

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

给你一张支票

有几个方面需要考虑：

• 必须借助3d变换，才能从垂直于2d屏幕法线的2d层获得所需的失真效果

• 有些转换需要供应商前缀

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

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

---

为什么不在SVG文件中添加dropshadow效果呢

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

---

tranform:skew

在这里可能会有所帮助。也许是有用的，找到一面的属性，然后再调整大小。是的，加上使用内联SVG确实很方便，并且以要点的形式解决了我的两个问题。还有其他缺点（例如缓存），这就是为什么我在接受它作为解决方案之前要等待一段时间。谢谢！但围绕原始矩形的两个角移动的3d变换（注意：底线与框布局/文本平行）似乎有点激烈。虽然这可能是没有SVG的唯一css方法，但我并不真正希望实现它。

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

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