使用CSS3的倾斜边框的Div？
我正在创建一个javascript小部件，用于调整相邻div的大小，以便在用户将鼠标悬停在div上时显示更多的div背景图像。这非常简单，并且可以很好地处理具有直边的div(显然)。然而，边缘“需要”倾斜。
有没有一种简单的方法可以使用css3在两个DOM元素之间建立一个倾斜的边框？
我遇到过css3变换(即倾斜)和对角线边界技巧(使用一半颜色，一半透明)，但这两种方法似乎都不能达到我需要的效果。
我试图达到的效果如下图所示：
回答 2
Stack Overflow用户
发布于 2012-04-18 17:09:35
从技术上讲，您可以将图像嵌入到旋转后的<div/> (参见css3的transform: rotate(<X>deg))中，然后以相反的角度旋转嵌入的图像。
或者，您可以使用SVG (带有<clipPath>)来实现此效果。此外，嵌入在<object/>标签中的SVG可以使用JavaScript，因此响应部分可以成为过程的一部分。
两个JSFiddle都在路上了。
CSS :EDIT1版本：http://jsfiddle.net/kU3tu/
EDIT2: SVG版本：http://jsfiddle.net/b2JJK/
Stack Overflow用户
发布于 2012-04-18 17:04:12
我能想到的解决方案是使用两个绝对定位的图像和一个溢出设置为隐藏的div容器。
红色和绿色是图像(红色的可能从顶部更短，绿色的可能从底部更短，因为这些部分无论如何都看不见)。蓝色是overflow:hidden的容器。
但此解决方案需要旋转图像，这可能不适合您的使用。
第二种解决方案是使用一个图像和一个分隔符div作为旋转的边框。但在这种情况下，您可以在任何情况下之前准备适当的映像，而不需要进行黑客攻击。
https://stackoverflow.com/questions/10205895
复制相似问题