使用CSS3划分斜边框？
Dav*_*nes 19 html css css3 css-shapes
我正在创建一个javascript小部件来调整邻近div的大小,以便在用户将鼠标悬停在其上时显示更多div的背景图像.这很简单,并且可以很好地处理具有直边(显然)的div.然而,边界'需要'倾斜.
是否有一种简单的方法使用css3在2个DOM元素之间形成倾斜的边界？
我遇到过css3转换(即倾斜)和对角线边界技巧(使用半色,半透明),但这些似乎都无法实现我所需要的.
我想要实现的效果就像在这张图片中:
您可以在技术上将图像嵌入旋转(参见CSS3 transform: rotate(<X>deg))<div/>,然后以反向角度旋转嵌入的图像.
或者,您可以使用SVG(with <clipPath>)来实现此效果.加上<object/>标签中嵌入的SVG 可以使用JavaScript,因此响应部分可以成为骑行的一部分.
两个JSFiddle都在路上.
EDIT1:CSS版本:http://jsfiddle.net/kU3tu/
EDIT2:SVG版本:http://jsfiddle.net/b2JJK/