如何边框添加到一个锯齿状边界容器

你好我有麻烦试图拿出添加1px的的边框的容器具有锯齿状边界等的一种方式：如何边框添加到一个锯齿状边界容器

https://codepen.io/swizenfeld/pen/ZyBybW

body { 
 
    background: #f4f4f4; 
 
} 
 
.edge { 
 
    width: 100%; 
 
    height: 400px; 
 
    background: #fff; 
 
    margin-top: 30px; 
 
} 
 
.edge:before { 
 
    content: " "; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    top:-30px; 
 
    height:30px; 
 
    background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, 
 
       linear-gradient(-135deg, transparent 75%, white 76%) 0 50%; 
 
    background-repeat: repeat-x; 
 
    background-size: 30px 30px, 30px 30px; 
 
}

<div class="edge"></div>

任何想法？

来源

2017-06-15 Sergio Wizenfeld

您需要添加更多linear-gradient()显示锯齿状边界

body { 
 
    background: #f4f4f4; 
 
} 
 
.edge { 
 
    width: 100%; 
 
    height: 400px; 
 
    background: #fff; 
 
    margin-top: 30px; 
 
} 
 
.edge:before { 
 
    content: " "; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    top:-30px; 
 
    height:30px; 
 
    background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%); 
 
    background-repeat: repeat-x; 
 
    background-size: 30px 30px, 30px 30px; 
 
}

<div class="edge"></div>

对于border-left, -bottom, -right，尝试用下面的代码段玩，看到评论也为CSS属性给出。

body { 
 
    background: #ccc; 
 
} 
 
.edge { 
 
    width: 100%; 
 
    height: 400px; 
 
    background: white; 
 
    margin-top: 30px; 
 
    border-left:2px solid red; 
 
    border-bottom:2px solid red; 
 
    border-right:2px solid red; 
 
    position:relative; /*make it relative*/ 
 
} 
 
.edge:after { 
 
    content: " "; 
 
    display: block; 
 
    position:absolute; /*make it absolute*/ 
 
    width: 100%; 
 
    top:-6px; /* play with top and height too*/ 
 
    height:23px; 
 
    /*background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);*/ 
 
    background: linear-gradient(45deg,white 14px, red 16px, transparent 17px), linear-gradient(-45deg, white 14px, red 16px, #ccc 17px); 
 

 
    background-repeat: repeat-x; 
 
    background-size: 30px 30px, 30px 30px; 
 

 
}

<div class="edge"></div>

来源

2017-06-15 18:56:53

你能帮我去1个一步，如果我添加边框底部，左，右它不边缘处的连接。 –

更新了代码，尝试使用这两个片段。你会想到应用边界 –

如何边框添加到一个锯齿状边界容器

回答

相关问题