It is necessary to make a zigzag border of the block (from triangles).

How best to implement it?

enter image description here

  • Can you show how it should look in the picture? - Crantisz
  • I added a picture - PetrCool
  • 3
    @alexanderbarakin, stop trying to close everything up. - Qwertiy ♦
  • @alexanderbarakin Picture here as an application (for clarity), and the text of the question can be slightly edited (which I did). - Vadim Ovchinnikov
  • association: stackoverflow.com/q/12031328/1548895 - Vadim Ovchinnikov

3 answers 3

.zig-zag { background: #1ba1e2; position: relative; } .zig-zag:after { background: linear-gradient(-45deg, transparent 20px, #1ba1e2 0), linear-gradient( 45deg, transparent 20px, #1ba1e2 0); background-position: left bottom; background-size: 20px 20px; content: ""; display: block; height: 20px; width: 100%; position: absolute; } /* Просто оформление, для зиг-зага не нужно */ body { margin: 0; } h1 { color: #fff; font-family: Arial; margin: 0; padding: 15px; text-align: center; } 
 <div class="zig-zag"> <h1>Рамка зубцами</h1> </div>

  • Thank you very much! - PetrCool

Translation of my answer to enSO :

Improved minimal CSS:

 div { background: #1ba1e2; position: relative; } div:after { content: ""; display: block; position: absolute; width: 100%; height: 30px; background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%, linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%; background-size: 30px 30px; } /* Стили чисто для демонстрации */ h1 { color: #fff; text-align: center; margin: 0; padding: 0.5em; } 
 <div> <h1>Zig Zag Borders</h1> </div>

If you want to remove duplicate values, you can also use CSS variables, also known as Custom properties . They work everywhere except IE.

 :root { --background-color: #1ba1e2; --zigzag-item-size: 30px; } div { background: var(--background-color); position: relative; } div:after { content: ""; display: block; position: absolute; width: 100%; height: var(--zigzag-item-size); background: linear-gradient(-45deg, transparent 75%, var(--background-color) 0) 0 50%, linear-gradient(45deg, transparent 75%, var(--background-color) 0) 0 50%; background-size: var(--zigzag-item-size) var(--zigzag-item-size); } /* Стили чисто для демонстрации */ h1 { color: #fff; text-align: center; margin: 0; padding: 0.5em; } 
 <div> <h1>Zig Zag Borders</h1> </div>

A quick note:

I use 0 as the gradient steps so as not to duplicate the previous values, since according to the specification the gradient step cannot be less than the previous value.

In the case of a color-stop before it.

  • I have it drawn ugly i.imgur.com/uHCs8Jc.png i.imgur.com/zzrQCG1.png - andreymal
  • @andreymal And in what browser and for what values? The first example or the second? - Vadim Ovchinnikov
  • First and second respectively, firefox on Ubuntochka - andreymal
  • @andreymal Unfortunately, I can’t play it on Windows, including Firefox. I don't have Ubuntu. If you find a fix for this problem, then I will update my answer. - Vadim Ovchinnikov
  • @andreymal Does Chrome have such a problem too? On Windows in Chrome everything is OK, if that. - Vadim Ovchinnikov

You can make a triangular border if that suits you. css3 shapes

  #up-triangle { width: 0; height: 0; border-bottom: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; }