如何邊框添加到一個鋸齒狀邊界容器

你好我有麻煩試圖拿出添加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個一步，如果我添加邊框底部，左，右它不邊緣處的連接。 –

更新了代碼，嘗試使用這兩個片段。你會想到應用邊界 –

如何邊框添加到一個鋸齒狀邊界容器

回答

相關問題