使 div 的顶部和底部边框具有锯齿状边缘 https://stackoverflow.com/questions/18972888/make-a-divs-top-and-bottom-border-have-a-jagged-edge
根据@ᴀʀᴜn BᴇrtiL 的回答，我能够创造一些东西。
问题是它看起来不太好，我无法摆脱背景颜色。不使用阴影是一种选择，但使用静态单色背景则不是。
那么如何使其透明呢？
或者还有别的办法吗？我知道 CSS3 可以在边框中使用图像，但我更喜欢不带图像的 CSS 代码。
有多种方法可以实现这一点（包括 JS 和 SVG 解决方案）。然而，我认为使用纯 CSS 最简单的解决方案是使用一些伪元素（以渲染锯齿状边缘）结合linear-gradient和多背景功能。这是演示代码：
div {
width:200px;
height:250px;
background:white;
position:relative;
margin-top:25px;
}
div:before, div:after {
content:'';
width:100%;
height:5px;
position:absolute;
bottom:100%;
left:0;
background-image: linear-gradient(135deg, transparent 66%, white 67%),
linear-gradient(45deg, white 33%, gray 34%, transparent 44%);
background-position: -5px 0;
background-size: 10px 100%;
background-repeat:repeat-x;
}
div:after {
top:100%;
bottom:auto;
background-image: linear-gradient(135deg, white 33%, gray 34%, transparent 44%),
linear-gradient(45deg, transparent 66%, white 67%);
}
body {
background:url(http://placekitten.com/800/600);
}
Demo. http://jsfiddle.net/viphalongpro/z6uRW/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
