動作する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にエンコードしています。更新：いいえ、申し訳ありません。しかし、私はまだそれが最高の解決策だと思っています。

2つのジグザグパターンを使用します.1つは水平、もう1つは垂直です。それから、不透明な要素で境界を除くすべてをカバーします。

背景の配置を変更すると、パターンはもう機能しなくなり、これらの菱形が表示されます。あなたは別のパターンを考えることができます...または、ちょうど左の部分をカバーする。

1. 削除します。動かして水平線

2. のために使われています以前のように：と左余白にした後は

   .borderedだけ1つのバーを示すために、その幅を調整する：{ 後に.. 左：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-ジグザグの背景。それはどちらも線ではなく、それは左側にフラットであり、右側にジグザグです。

次に、最初のもののように上に他の背景を使用し、白にして3pxを置き、最初の背景のほとんどを白いジグザグで覆います。このようにして、結果として生じるジグザグの線は、実際には背景の「可視」（白で覆われていない）の唯一の部分です。

ネストされたdivの代わりに：beforeセレクタを使用しました。要素の：beforeまたは：afterに設定されたプロパティの内容（空の文字列であっても）は、他の要素と同じように動作する「何か」を作成します。その要素は、実際にはDOMではなく動作します。そしてこの擬似要素は、白いジグザグを持ち、灰色の背景に浮いています。