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

Question

我正在尝试在此处制作导航菜单： 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做到这一点。 任何建议都很好！

Answer 1

在您链接的文章中 ，它们确实显示了如何实现边框的代码，还提供了一个小提琴 。

这是该文章中的代码：

  .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> 

Answer 2

试试这个小提琴 。

我使用伪元素和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;
}