3D-Box ohne before + after

[Detlef G.]

Hallo Florian

Damit schaffe ich links unten schon den richtigen Effekt. Allerdings müsste die Kante links oben und rechts unten noch abgeflacht werden, sodass eine Box darauf wird.

.box {  
position:relative;  
height:300px;  
width:300px;  
background-color:#FFFFFF;  
border-left: 10px solid #A8A8A8;  
border-bottom: 10px solid #747474;  
border-top: 1px solid #c9c9c9;  
border-right: 1px solid #c9c9c9;  
}  
.box .lo, .box .ru {  
display:block;  
height:0px;  
width:0px;  
overflow:hidden;  
position:absolute;  
}  
.box .lo {  
border-bottom: 10px solid #a8a8a8;  
border-left: 10px solid #fff;  
top:-1px;  
left:-10px;  
}  
.box .ru {  
border-right: 10px solid #fff;  
border-top: 10px solid #747474;  
right:-1px;  
bottom:-10px;  
}  

   <div class="box">  
     <span class="lo"></span><span class="ru"></span>  
   </div>  

Dürfte zumindest in einigermaßen standardkonformen Browsern funktionieren, sowie im IE 6 im Standardmodus.

Auf Wiederlesen
Detlef