SummArg | Cursos y recursos para webmasters

28/08/2010

Triángulos sólo con CSS3

En el blog de davidwalsh podemos ver como con pocas líneas se pueden construir triángulos únicamente utilizando HTML + CSS3. Chequeen el demo aquí.

HTML

<div id="position:relative;">
		<!-- UP -->
		<div id="up"></div>
</div>

CSS

div#up {
 width:0px;
 height:0px;
 border-left:50px solid transparent;  /* left arrow slant */
 border-right:50px solid transparent; /* right arrow slant */
 border-bottom:50px solid #2f2f2f; /* bottom, add background color here */
 }

Lo que eso genera son grandes bordes y los segmentos perpendiculares quedan apuntando en una dirección, logrando con esto un triángulo apuntando en dirección opuesta al segmento que dimos color.

Si quisieramos tomar el ejemplo de arriba y lograr un triángulo que apunte hacia abajo, debemos reemplazar el border-bottom por border-top. Y todo esto en pocas líneas de código y sin utilizar ningún plugin. Impresionante!

Dejar un comentario