Sobre en CSS3 con :before y :after

En este tutorial crearemos un sobre utilizando únicamente hojas de estilos.

Lo primero que necesitamos, es un elemento que nos sirva como base para el sobre:

<div id="envelope"></div>

Como estilo inicial colocaremos un borde punteado, esquinas redondeadas y de un tamaño relativamente grande para ver los resultados:

#envelope{
	border:5px dashed #F00;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	height:250px;
	margin:0 auto;
	position:relative;
	width:400px;
}

Ahora utilizando el pseudoselector :before se genera un segundo elemento al cual sólo dejaremos el borde inferior. Aplicamos una rotación y lo desplazamos con left y top.

Son importantes las propiedades content y position para que se pueda mostrar correctamente.

#envelope:before{
	border-bottom:5px dashed #F00;
	content:"";
	height:5px;
	left:-25px;
	position:absolute;
	top:63px;
	-webkit-transform:rotate(35deg);
	-moz-transform:rotate(35deg);
	-ms-transform:rotate(35deg);
	-o-transform:rotate(35deg);
	transform:rotate(35deg);
	width:250px;
}

Con el pseudoselector :after generamos otro elemento igual pero con una rotación inversa.

#envelope:after{
	border-bottom:5px dashed #F00;
	content:"";
	height:5px;
	left:175px;
	position:absolute;
	top:63px;
	-webkit-transform:rotate(-35deg);
	-moz-transform:rotate(-35deg);
	-ms-transform:rotate(-35deg);
	-o-transform:rotate(-35deg);
	transform:rotate(-35deg);
	width:250px;
}

De esta manera optimizamos el código creando 3 elementos a partir de uno solo.