Bordes, triángulos y curiosidades CSS

En DailyCoding hay un artículo que muestra una curiosidad del CSS. Sacando provecho de ella, lo que han creado es una manera simple de crear recuadros muy llamativos.

Las propiedad border es algo que usamos habitualmente, generalmente son bordes "finos" pero nada impide usar bordes más grandes:

<div style="border: 10px solid #0080C0; height: 100px; width:200px;"></div>

Tampoco nada impide que en lugar de colocar los cuatro bordes, sólo usemos uno o varios de ellos de manera indistinta:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid #0080C0; height: 100px; width:200px;"></div>

Por supuesto, a nadie se la va a ocurrir colocar como color del borde un color transparente, o sea, igual al color del fondo ya que, a simple vista, suena absurdo colocar un borde y luego ocultarlo. Sin embargo, si lo hacemos, ocurrirá esto:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid transparent; height: 100px; width:200px;"></div>

No, no es magia, lo que ocurre es que cuando le damos dos colores distintos a dos bordes adyacente, se produce un "conflicto" y la unión se marca sesgada. Si ambos son del mismo ancho, el ángulo formado es de exactamente de 45º.

<div style="border-bottom: 10px solid #0080C0;border-top: 10px solid #FF0000; border-left: 10px solid #008000; border-right: 10px solid #FF8040; height: 100px; width:200px;"></div>

Así que, aprovechando esta particularidad y usando bordes de color transparente, parece sencillo dibujar triángulos sólo con CSS:

border-bottom border-left	border-bottom border-right	border-top border-left	border-top border-right
border-bottom + border-left + border-right		border-top + border-left + border-right

De allí en adelante, la creación de formas no rectangulares para mostrar ciertos contenidos parece depender de la imaginación y estos son dos de los modelos sugeridos por DailyCoding:

HACIA ARRIBA

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

HACIA ABAJO

Este es el código CSS de ambos ejemplos:

<style type="text/css">
.calloutUp { /* es el borde del triangulito hacia arriba */
  border-bottom: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px;
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 10;
}
.calloutUp2 {  /* un triangulito más chico adentro del anterior */
  border-bottom: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  position: relative;
  left: -10px; top: 2px; /* lo posicionamos desplazado */
  height: 0; width: 0; /* no tendrá dimensiones */
  z-index: 11;
}

.calloutDown { /* es el borde del triangulito hacia abajo */
  border-top: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px; /* lo posicionamos */
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 11;
}.calloutDown2 { /* un triangulito más chico adentro del anterior */
  border-top: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  height: 0; width: 0; /* no tendrá dimensiones */
  position: relative;
  left: -10px; top: -12px; /* lo posicionamos despalazado */
  z-index: 10;
}

.divContainerUp { /* el contenido del recuadro hacia arriba */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: -1px;
  width: 500px;
  z-index: 9;
}
.divContainerDown { /* el contenido del recuadro hacia abajo */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: 1px;
  z-index: 3;
  width: 500px;
}
</style>

Y este es el código HTML que debemos emplear para utilizarlos:

<div class="calloutUp"><div class="calloutUp2"></div></div>
<div class="divContainerUp"> ... el contenido del ejemplo superior ... </div>

<div class="divContainerDown"> ... el contenido del ejemplo inferior ... </div>
<div class="calloutDown"><div class="calloutDown2"></div></div>

REFERENCIAS:

Cosas Sencillas