CSSジグザグ罫線の作成方法は？

Question

私のヘッダー要素のベースラインに沿ってこの効果を得ようとしています。

それについて移動する最良の方法は何ですか？画像なしで（おそらくSVG）それを行う方法はありますか？

これは、絶対配置された擬似要素上の白い四角のrepeat-x背景イメージを使用している場合にはうまくいきます。しかし、それは画像を使用して、私はそれを避けることができて大好きです。

Answer 1

ここに解決策があります。それはジグザグ境界と呼ばれています。

http://jsfiddle.net/justinmc/QqnD3/

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

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

クレジット https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/