首先:我正在尝试的内容目前不兼容Chrome浏览器。请使用Firefox浏览器查看示例。
这是我所做的:
http://jsfiddle.net/Robodude/ev6VF/1/
<style type="text/css">
.clip3 {
clip-path: url(#c3);
}
</style>
<svg height="0">
<defs>
</defs>
<clipPath id="c3">
<polygon points="75,0 225,0 275,100 225,200 75,200 25,100" />
</clipPath>
</svg>
<div class="container left">
<div id="Image1" class="Image1 image clip3"></div>
<div id="Image2" class="Image2 image clip3"></div>
<div id="Image3" class="Image3 image clip3"></div>
</div>
我希望能够在被剪切的html元素上绘制一些装饰和边框,就像下面ms paint中看到的那样。通过SVG可以实现吗?也许我可以为.clip3添加另一个属性,并将其与某些svg形状链接起来? 我正在尝试很多不同的方法-但它们只是猜测,我找不到任何资源或信息,告诉我如何做到这一点。我原本希望它会像这样工作:
<style type="text/css">
.clip3 {
clip-path: url(#c3);
border: url(#b1);
}
</style>
<defs>
<polyline id = "b1" points="75,0 225,0 275,100 225,200 75,200 25,100" stroke = "blue" stroke-width = "5"/>
</defs>