如何獲得工作的CSS鋸齒邊框？

Question

我想做一個CSS之字形垂直邊框。我一直在尋找這個Codepen作爲參考。我的嘗試只是製作鑽石，我一直在玩它，但似乎無法讓它工作。這是我的Codepen。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#ribbon { 
 
    background: whitesmoke; 
 
} 
 
#ribbon ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100px; 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
#ribbon ul li { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    align-items: center; 
 
    justify-content: center; 
 
    cursor: pointer; 
 
} 
 
#ribbon ul li:not(:last-child) { 
 
    border-right: solid; 
 
} 
 
#ribbon .v-zigzag { 
 
    background: linear-gradient(135deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb); 
 
    background-position: right top; 
 
    background-repeat: repeat-y; 
 
    background-size: 10px 10px; 
 
}

<section id="ribbon"> 
 
    <ul> 
 
    <li class="v-zigzag">Mode 1</li> 
 
    <li>Mode 2</li> 
 
    <li>Mode 3</li> 
 
    <li>Mode 4</li> 
 
    </ul> 
 
</section>

Answer 1

的代碼示例使用SVG圖像，他們在編碼到CSS。更新：不，不，對不起。但我仍然認爲這是最好的解決方案。

它使用兩個鋸齒形圖案：一個水平和其他垂直。然後它只是覆蓋了一切，只是帶有不透明元素的邊界。

當您更改背景對齊時，圖案不再適用，您將獲得這些鑽石。你可以想象一個不同的模式......或者只是覆蓋左邊的部分。

1. 卸下：前，因爲它是用於水平線

2. 移動：後向左邊距和調整它的寬度，只顯示一個杆

   .bordered：{ 後.. 。 left：0; 寬度：26em;

替代解決方案（我想出了使用當前的標記一個更好的）：

<li class="v-zigzag">Test</li></ul> 

---

.v-zigzag { 
    position: relative; 
    background: linear-gradient(45deg, #ccc 5px, transparent 0) 0 5px, linear-gradient(135deg, #ccc 5px, #fff 0) 0 5px; 
    background-position: right top; 
    background-repeat: repeat-y; 
    background-size: 10px 10px; 
} 
.v-zigzag:before { 
    content:""; 
    position: absolute; 
    background: linear-gradient(45deg, #fff 5px, transparent 0) 0 5px,linear-gradient(135deg, #fff 5px, transparent 0) 0 5px; 
    background-color: transparent; 
    background-position: right top; 
    background-repeat: repeat-y; 
    background-size: 10px 10px; 
    width: 10px; 
    right: 3px; 
    top: 0; 
    bottom: 0; 
} 

說明：

的曲折是不是一個邊界，它的實際上.v-zigzag的背景。它也不是一條線，它的左邊是平的，右邊是曲折的。

然後，我們使用頂部的其他背景，如第一個，但白色，我們把它放在右邊3px，覆蓋大部分的白色之字形的第一個背景。這樣，由此產生的之字形線實際上是背景的「可見」（未覆蓋白色）的唯一部分。

而不是嵌套的div，我們使用：before選擇器。屬性內容（即使它是一個空字符串）設置爲元素之前或之後：創建一個「東西」，其行爲與其他元素一樣，是一種在DOM中不具有實際操作性，但表現如此的元素。這個僞元素有白色之字形，漂浮在灰色背景上。