Cómo Crear Líneas Diagonales con CSS

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Hace unos días recibí mi invitación para Google Music. Mientras navegaba por la aplicación, noté un pequeño, pero elegante truco que usan para crear pestañas y bordes diagonales con CSS simple y conocido desde hace tiempo. ¡Hoy te mostraré cómo hacer lo mismo en tus propios proyectos!

¿Prefieres un Tutorial en Vídeo?

Paso 1: La Estructura del Código

Comenzamos con un formateado simple.



<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <title>Demo</title> 
</head> 
<body> 
  <a href="#">New Music</a> 
	<div> 
		<h3> Hello, Everyone! </h3> 
		<p> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p> 
	</div> 
</body> 
</html>

Mantendremos esta demostración lo más sencilla que sea posible.

Paso 2

Después, sólo por añadir un poco de diseño, aplicaremos un color de fondo y un poco de espacio, margen, en el elemento body.


body {
	background: #e3e3e3;
	font-family: sans-serif;
	width: 400px;
	margin: 100px auto;
}

Paso 3

Ahora, aplicaremos estilo a la etiqueta del enlace, algo como -aplicar un nuevo color, cambiar el texto a negrita, añadir algún borde, etcétera.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
}

¿Has observado cómo, al establecer anchuras amplias para los bordes, cuando estos se cruzan en las esquinas, se crea una línea diagonal? ¿Me pregunto si podríamos utilizar esta intersección como borde para una pestaña? Intentémoslo reduciendo la altura, height, a cero.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

   height: 0;
}

¡Estamos cada vez más cerca! Tal vez si ahora ajustásemos la altura de la línea del enlace, podríamos hacer que el texto se situase dentro de esa caja!


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Paso 4

¡Estamos llegando! Pero, realmente, no necesitamos ese horrible borde rojo de la derecha. ¿Hay alguna forma para especificar que debe ser del mismo color que el fondo del body sin tener que repetir su valor hexadecimal? ¡SÍ! Utilizando para ello la palabra clave transparent.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Paso 5

En este punto, la cuestión obvia, es que el aspecto resultante es un poco extraño, cuando el fondo se extiende por todo el ancho del contenedor. El instinto natural podría ser actualizar el atributo display asignándole el valor inline. Sin embargo, como muestra la siguiente imagen, no funcionará.

Necesitamos que el elemento conserve su naturaleza tipo bloque, block, para que acepte una altura igual a 0. La respuesta a este dilema es utilizar display: inline-block; o aplicar la propiedad float a la etiqueta del enlace y clear a los elementos que le siguen en el flujo. Vamos a utilizar esto último.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

¡Mucho mejor!

Paso 6

Por último, vamos a aplicar un poco estilo al div bajo él, ¡y casi hemos terminado!


div {
	 border: 1px solid #4c4c4c;	
	 border-top: 3px solid #4c4c4c;	   	 
	 padding: 20px;
}

En Safari

En Firefox

Uh oh. Tenemos un problema. Parece que Firefox y Webkit no se ponen exactamente de acuerdo sobre cómo representar los elementos con alturas con valor cero y display inline-block.

En una nota casual, esto me tenía un poco confundido. Sin tener que recurrir a hacks, no pude conseguir que Firefox y Chrome representasen el diseño de forma exacta. ¡Si encuentras alguna manera, me avisas en la sección de los comentarios! Actualización - consulta los comentarios para encontar una alternativa.

Paso 7

Hay formas de dirigirnos específicamente a navegadores Webkit con CSS, pero para mí es importante tener en cuenta que trucos como este deben ser utilizados en situaciones en las que necesites un último recurso. En otras palabras, no hagáis esto casa niños (a menos que te veas obligado). En nuestra situación, parece que sería más inteligente utilizar floats para realizar este diseño. No obstante, arriesguémonos y experimentemos con algunas técnicas alternativas.

Muchos no son conscientes de que las media queries pueden utilizarse para dirigirnos específicamente a navegadores Webkit. Ver lo que sucede cuando utilizamos una propiedad específica del webkit conforme la condición para la media query...


@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

¡Ta chan! Funciona. Aunque recuerda - ¡usa este truco sólo si no tienes no hay otra opción!

Producto Final

Es una técnica bastante simple, sin embargo, deberíamos tenerla todos en nuestros cinturones herramienta. ¿Has utilizado algún truco de este tipo en tus proyectos? ¡Avisadme mediante un comentario!