Válido para XHTML 1.0 Estrícto + CSS
Este código generará advertencias por elementos vacios.
Al usar la propiedad position:absolute dentro de un contenedor con la propiedad position:relative, su posición será solamente absoluta dentro del contenedor. Poniendo objetos absolutos a cada esquina, podemos ponerle fondo de imágenes para aparentar las esquinas. Con la técnica de sprites de una imagen, a partir de un solo círculo se pueden crear todas las imágenes.
La imagen (circle.png):
El código:
<style type="text/css">
body{background:#ccf}
#contenedor{background:#f99;width:80%;margin:0 auto;padding:1em;position:relative}
.lt{background:url(circle.png) no-repeat left top;width:10px;height:10px;position:absolute;left:0;top:0}
.rt{background:url(circle.png) no-repeat right top;width:10px;height:10px;position:absolute;right:0;top:0}
.lb{background:url(circle.png) no-repeat left bottom;width:10px;height:10px;position:absolute;left:0;bottom:0}
.rb{background:url(circle.png) no-repeat right bottom;width:10px;height:10px;position:absolute;right:0;bottom:0}
</style>
Cómo implementarlo:
<div id="contenedor"> <span class="lt"> </span> <span class="rt"> </span> <span class="rb"> </span> <span class="lb"> </span> <p>[Contenido]</p> </div>
