ハブでは長い間、CSSに関する投稿がなかったため、このギャップを埋めることにしました。 今日は画像のみではなくCSSのみを使用してギザギザの背景を作成する方法を学習しています！
そのようなフェンスの重要な要件：
- 画像がありません！
- 静かに水平に伸びるはずです
- 素材の不均一な背景を必ずサポートしてください
- 背景には追加のマークアップは必要ありません。 擬似要素は避けるのが最善です（保存が良い）。
サポートされているブラウザー：Chrome、Firefox（> 3.6）、Opera（> = 12）、Safari（> = 5）、IE10。
IE 7、8では、通常の塗りつぶしとしてフォールバックがあります。 しかし、IE9には問題があります-グラデーションをサポートしていませんが、hslaとrgbaの色を理解しています。 本当に「素晴らしい」ブラウザ。 さて、今のところ無視する必要があります。 誰かがIEの良い代替品を教えてくれたら、感謝するだけです。
さあ、始めましょう。
スカラップエッジは、互いに重なり合う2つの三角形で構成されます。
background-image: linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); background-repeat: repeat-x, repeat-x; background-position: 10px 0, 10px 0; background-size: 20px 20px, 20px 20px;
不快な瞬間をすべて隠すには、単色の上に置くだけです。
border-top: 10px solid transparent; background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); background-repeat: repeat, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0; background-size: auto auto, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box; background-origin: padding-box, border-box, border-box, border-box, border-box;
まあ、それだけです。 下から同じ歯を追加することが残っています。
border-top: 10px solid transparent; background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%), linear-gradient(to top right, transparent 50.5%, skyblue 50.5%), linear-gradient(to top left, transparent 50.5%, skyblue 50.5%); background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%; background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box, border-box, border-box; background-origin: padding-box, border-box, border-box, border-box, border-box;
フォールバックを忘れないでください：
background-color: lightblue; background-color: hsla(0, 0%, 0%, 0);
その結果、好きなだけ伸ばせる歯のあるブロックができました。 擬似要素は関与しません。たとえば、側面に同じ歯を追加するために使用できます。
デモ