Enlaces en forma de triángulo

No es algo que uno vaya a utilizar mucho pero, de todas formas esto es una curiosidad interesante.

Cada etiqueta que colocamos es un rectángulo, siempre es así, incluso si usamos algún tipo de imagen transparente que aparenta otra forma, en realidad, sigue siendo un rectángulo. Eso, es algo fácil de comprobar cuando son enlaces, el área donde podemos hacer click, excede el supuesto tamaño y si le agregamos un borde, lo veremos con claridad. No hay nada que hacer al respecto, incluso, si usamos CSS para "rotar" algo, el rectángulo sigue siendo un rectángulo:

En Impressive Webs se les ha ocurrido una forma de eludir esta restricción y crear un enlace que no sea rectangular sino que tenga la forma de un triángulo y como demostración, lo aplican en un ángulo de la página, algo similar a lo que se hace con efectos como los llamados Page Peel pero claro, mucho más elemental.

La idea es sencilla aunque tiene sus bemoles para compatibilizarla con Internet Explorer ya que allí hay que agregar algún hack para posicionarlo correctamente dado que la forma de "medir" las cosas es diferente.

El HTML es "normal", un DIV contenedor donde colocamos el enlace y el contenido:

<div class="contenedor">
<a id="corner" href="la_URL" > el enlace </a>
... cualquier otro contenido ...
<div>

Para que esto funcione, el DIV contenedor debe tener algunas propiedades establecidas de manera obligatoria y el resto es personalizable; y claro, la clave está en las propiedades del enlace, estas son las del ejemplo:

<style>
.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 0 0 0 20px;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
color: #FFF;
margin: 0 auto;
padding: 30px;
width: 470px;
}
#corner {
/* lo dimensionamos y lo posicionamos de manera absoluta */
display: block;
height: 100px;
position: absolute;
width: 100px;
/* lo rotamos */
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
top:-50px;
right:-50px;
/* otras propeidades optativas */
background-color: #A00;
box-shadow: 0px 0px 50px #000 inset;
}
</style>
<!-- la posición de ese mismo triángulo en Internet Explorer -->
<!--[if IE]>
<style>
#corner-ad {right: -30px; top: -70px;}
</style>
<![endif]-->

Donec ullamcorper bibendum viverra. Ut semper semper quam eget ornare. Phasellus eleifend, nisl ut malesuada dignissim, purus quam fermentum neque, sit amet tristique odio purus ac ligula. Nunc tristique, massa et aliquam laoreet, metus dolor euismod metus, vitae aliquet leo arcu id elit.

Cras at iaculis nisi! Vestibulum ac est risus, eu venenatis mi. Nunc felis odio, sagittis vitae ultrices vel, pellentesque eu tortor. Morbi vestibulum nulla ac turpis ullamcorper lacinia. Duis quis ipsum orci, dignissim pellentesque lectus. Suspendisse vitae augue eu orci lacinia sollicitudin. Etiam nunc turpis, lacinia nec fringilla ac, ultrices nec velit! Sed tristique convallis malesuada.