from ideas by Lasse Reichstein Nielsen and Eric Meyer

Slants from empty boxes

Borders-only boxes

Boxes drawn using border properties only. The size of the inside box is zero.

Top border: orange; right border: blue; bottom border: red; left border: green.

Resizable Sitepoint logo

Sitepoint logo in CSS consists of two floated "image" boxes, each having two "border only" boxes to define corners. Dimensions are in "ems" allowing the whole logo to resize with text zoom.

An extra <div> is needed inside the "image" boxes for this to work in IE 5+ Win. Because IE expands floats, the "border only" corners are absolutely positioned to work in this browser.

Folder tabs
tab text
2nd tab
third tab

Each tab is floated left. A "border only" box is positioned in the top left corner and colored to make the corner appear cut at an angle.

3D effect

Box 1

Box 2

Box 1 has a darker blue border on the right and a yellow bottom border; Box 2 has a gray border on top. These are floated next to each other. The gray "lid" is simulated by two positioned border-only divs with two adjacent borders defined.

3D effect reprise

Box 1

Box 2

Add extra borders to Box 1 and Box 2 so they appear stacked. Just two extra border-only boxes added to the HTML create the center slants.