鋸歯状の背景を繰り返すCSS

ハブでは長い間、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%); /* 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);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、好きなだけ伸ばせる歯のあるブロックができました。 擬似要素は関与しません。たとえば、側面に同じ歯を追加するために使用できます。



デモ