具有透明背景的锯齿形或锯齿形边框答案

【问题标题】：Zig Zag or Serrated border with transparent background具有透明背景的锯齿形或锯齿形边框
【发布时间】：2015-08-06 02:16:57
【问题描述】：

我正在尝试让我的导航菜单：http://jillianssf.com/dev/ 出现透明的锯齿状边框。

我在网上找到了一些东西，但我不知道如何在我的网站中实现它。

具体来说，我在本页底部找到了一些关于 SASS 混合的内容：https://localmotors.com/blog/post/zig-zag-borders-in-css/1205/

I also found this in codepen: http://codepen.io/gilbarbara/pen/pvwmEb

问题是没有关于如何将其添加到网站的说明。

我已经使用图像边框完成了顶部按钮，但它看起来不是很干净。如果可能的话，我想纯粹通过 CSS 来做这件事。任何建议都会很棒！

【问题讨论】：

标签： html css

【解决方案1】：

在article you linked 中，他们确实展示了如何实现边框的代码，还提供了a fiddle。

这是那篇文章的代码：

    .container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}
  .container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

<div class="container">
	<h1>Content Here</h1>
</div>

【讨论】：

是的，但这会增加白色三角形。我要他们走开！

【解决方案2】：

试试这个fiddle。

我使用伪元素和 CSS 渐变来模拟锯齿形/锯齿状边框。

HTML

<div>
    Content Here
</div>

CSS

body {
    width: 100%;
    height: 100%;
    background-image: url(http://jillianssf.com/dev/wp-content/uploads/2014/05/slider-1.jpg);
}
div {
    height: 200px;
    padding: 20px;
    margin: 20px;
    position: relative;
    background: rgba(0,0,0,0.7);
    color: #fd0;
}
div:after {
    content: '';
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 100%;
    left: 0px;
    background:
        linear-gradient(-50deg, rgba(0,0,0,0.7) 4px, transparent 0px),
        linear-gradient(50deg, rgba(0,0,0,0.7) 4px, transparent 0px);
    background-size: 10px 10px;
    background-repeat: repeat-x;
}

【讨论】：