CSS: creare un ribbon con i CSS3

Le trasformazioni CSS3 possono essere applicate in sequenza sullo stesso elemento. Il risultato finale sarà ottenuto dalla combinazione degli effetti applicati. Possiamo sfruttare questa caratteristica per creare l'effetto dei ribbon utilizzando i soli CSS. Vediamo come.

La nostra marcatura d'esempio è la seguente:

<div id="box">
	<h2>...</h2>
	<p>...</p>
</div>

Il ribbon sarà ottenuto dall'elemento h2. Per prima cosa dobbiamo eliminare il contenuto in eccesso utilizzando la proprietà overflow sul contenitore:

#box {
	background: #222;
	color: #fff;
	line-height: 1.3;
	border: 5px solid #333;
	overflow: hidden;
	border-radius: 5px;
}

In questo modo il contenuto del ribbon non fuoriuscirà dal contenitore. Quindi creiamo il ribbon stesso:

#box h2 {
	margin: 0;
	text-align: center;
	font-size: 1.5em;
	font-weight: normal;
	-moz-transform: rotate(-40deg)  scale(0.75) translate(-46%, -490%);
	-webkit-transform: rotate(-40deg)  scale(0.75) translate(-46%, -490%);
	-o-transform: rotate(-40deg)  scale(0.75) translate(-46%, -490%);
	-ms-transform: rotate(-40deg)  scale(0.75) translate(-46%, -490%);
	transform: rotate(-40deg)  scale(0.75) translate(-46%, -490%);    
	background: #c30;
	width: 100%;
}

Abbiamo ruotato, scalato e translato il nostro elemento. Il testo dell'elemento deve essere centrato per essere visibile. Ora dobbiamo solo creare un pò di spazio tra il ribbon ed il resto del contenuto:

#box p {padding: 1em;}

Potete visionare l'esempio finale in questa pagina.