Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: