这里有一个
fiddle可以帮助你。这是使用简单的CSS完成的,我在这里只是举例说明。你可以根据自己的需求进行调整。
示例HTML:
<div class="cutout"></div>
而且还有CSS
.cutout {
width: 100px;
height: 0px;
background: none;
border-bottom: solid 30px rgba(0, 0, 0, 0.1);
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 0 transparent;
}
这将为您提供要重复的元素之一。为了更好地理解其工作原理,请查看以下CSS在
更新后的fiddle中:
.cutout {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.05);
border-bottom: solid 30px rgba(0, 255, 0, 0.1);
border-right: solid 30px rgba(0, 0, 0, 0.05);
border-left: solid 30px rgba(0, 0, 0, 0.05);
border-top: solid 0 rgba(0, 0, 0, 0.05);
}
基本上,我们将
transparent
颜色分配给右侧和左侧边框,并将
div
的高度设置为0。这意味着只有底部边框保持可见,并且由于边框宽度形成梯形形状。
编辑:看起来@Myke发布的链接已经展示了这个,我建议尝试使用类似的代码,直到您对如何呈现类似的形状有一个好的想法。