Was spricht gegen den ursprünglich von mir vorgeschlagenen Code?
Mit den Hintergrundgrafiken (2 bzw 3 sind nötig) darfst du dich selbst beschäftigen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Corner</title>
<style type="text/css">
body {
padding: 50px;
}
.box {
position: relative;
width: 500px;
height: 300px;
background: #808080;
}
.box span {
position: absolute;
width: 10px;
height: 10px;
}
.box .c1 { top: -10px; left: -10px; background: #FF0000; }
.box .c3 { top: -10px; right: -10px; background: #00FF00; }
.box .c5 { bottom: -10px; right: -10px; background: #0000FF; }
.box .c7 { bottom: -10px; left: -10px; background: #000000; }
.box .c2 { top: -10px; left: 0px; width: 100%; background: #00FFFF; }
.box .c4 { top: 0px; right: -10px; height: 100%; background: #FF00FF; }
.box .c6 { bottom: -10px; left: 0px; width: 100%; background: #FFFF00; }
.box .c8 { top: 0px; left: -10px; height: 100%; background: #FF8000; }
</style>
</head>
<body>
<div class="box">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
<span class="c4"></span>
<span class="c5"></span>
<span class="c6"></span>
<span class="c7"></span>
<span class="c8"></span>
</div>
</body>
</html>