7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Cómo Crear Líneas Diagonales con CSS

Read Time: 4 mins

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.

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

bare markupbare markupbare markup

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.

SpacingSpacingSpacing

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.

Style the anchor tagStyle the anchor tagStyle the anchor tag

¿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.

Zero heightZero heightZero height

¡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!

Adjusting the line heightAdjusting the line heightAdjusting the line height

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.

Transparent BordersTransparent BordersTransparent Borders

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á.

display inlinedisplay inlinedisplay inline

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.

¡Mucho mejor!


Paso 6

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

Uh ohUh ohUh oh
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...

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


Producto Final

Final ProductFinal ProductFinal Product

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.