3 ms·

<div id="zipper" class="entry"> <div></div> </div> why is this a thing? what is with empty div? is it necessary?

• stevehb 10y ago
  It looks like use them for CSS properties. The background for the outer div is set to #4e6590, the blue background. The background-image of the inner div (and its ::before and ::after) draw the parts of the zipper. For example, the inner div has background-image of linear-gradient(to top, transparent 10px, #aaa 10px, #aaa 15px, #ccc 15px, #ccc 30px, transparent 30px), repeating-linear-gradient(to bottom, transparent, transparent 5px, #ddd 5px, #ddd 10px), repeating-linear-gradient(to bottom, #ccc, #ccc 5px, transparent 5px, transparent 10px); which draws the teeth of the zipper.
• grahamel 10y ago
  From looking at the code, the empty div is the single div used for the image. The parent div is just the seperator for presentation - the coloured background. Otherwise they'll need a page per demo