Autor La Webera - http://www.youcode.com.ar/csstylesheets/esquina-doblada-en-capa-div-162
El siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya esquina inferior derecha está doblada.
Para ello deberemos contar con la siguiente imagen, la que para utilizarla solo deberán utilizar el botón derecho del ratón sobre ella y emplear la opción “Guardar como…”:
A continuación mostraremos los códigos que hemos utilizado en este ejemplo y la imagen resultante, para posteriormente explicar como lo hemos hecho:
<div id="oscuro"> <div id="esquina"> <p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72% y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, principalmente, en forma de hielo; de hecho, es el material base de los cometas y el vapor que compone sus colas.</p> </div> </div>
#oscuro {
width: 420px;
background: #444;
padding: 60px;
}
#esquina {
background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
}
#esquina p {
padding: 50px;
margin: 0;
}
La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los bordes de la misma (esto es importante para que no existan diferencias con el resto de la capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es el posicionamiento de las imágenes de fondo.
En primer lugar crearemos la capa contenedora, que será de color gris oscuro para que coincida con el fondo de la imagen. Luego crearemos la capa donde se insertará el texto (o cualquier otro contenido), cuyo fondo tiene el siguiente código CSS:
#esquina {
background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
}
Se trata en realidad de varias propiedades que se encuentran simplificadas:
Background-color, que tiene el valor #fff y que es visible en todos los puntos de la capa que no se encuentran cubiertos por la imagen.
Background-image, cuyo valor es la URL de la imagen de la esquina doblada.
Background-position, que tiene los valores bottom y right, para que la imagen de fondo se ubique en la esquina inferior derecha de la capa.
Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la capa y sea visible una sola vez.
Además, se debe hacer que el párrafo o cualquier otro contenido que se encuentre en la capa tenga un relleno tal que dicho contenido no se monte sobre la imagen utilizada en la esquina. Este efecto puede utilizarse (modificando la posición de la imagen de fondo y utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.
http://www.youcode.com.ar/csstylesheets/esquina-doblada-en-capa-div-162