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

在article you linked中，他们会显示代码如何实现边框，并提供a fiddle。

以下是该文章的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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;
}

之字形或锯齿状边界与透明背景

2 个答案: