soy Kseso y esto EsCSS

Triángulos en negativo o mordisquitos en los bordes puro Css

Mordisquitos triangulares a los laterales de elementos para dejar ver lo que hay debajo de ellos. O cómo realizar cortes triangulares a los bordes.

Triángulos en negativo o mordisquitos en los bordes puro Css

·Por Kseso ✎ 8
Vaciados triangulares con css

A estas alturas hacer figuras geométricas con css no reviste mayor dificultad. Son muchas las demos al respecto. Aquí ya dejé constancia en más de un artículo. Desde espirales logarítmicas, pasando por huevos y limones hasta hexágonos y otras formas.

Y sin faltar los triángulos tan utilizados últimamente. De éstos vimos 6 técnicas para hacer triángulos

Pero un detalle común a estas realizaciones es que las formas tienen su propio color o fondo. Pero si lo que queremos hacer es restar el triángulo a un elemento, como en la imagen de al lado, para que deje ver lo que hay debajo ¿sería posible?

La respuesta, como es lógico ya que aquí estás leyendo el artículo, es que sí. Y de una forma de lo más simple.

Antes de entrar en detalles, primero la demo en vivo:

See the Pen Mordisquitos a los bordes by Kseso (@Kseso) on CodePen

Ver demo en codepen

Los vaciados

Como todos los códigos están accesibles en el pen, pestaña css, una somera explicación de la idea. Pero antes, fíjate que he optado por repetir los estilos comunes en los dos ejemplos en vez de optimizarlos.

La idea es sencilla. El vaciado triangular se crea al colocar dos elementos adyacentes, en este caso pseudoelementos. En la primera imagen con los bordes superiores sólidos y los laterales adyacentes transparentes.
En en segundo ejemplo, es el borde lateral el sólido y el inferior del :before y superior de :after los transparentes.

Postcrossing
Artículo de libre disposición

Complementado con 'outline' para que el triángulo vacío no llegue hasta el límite exterior sino que haya ese pequeño falso borde se prolongue un poco más allá del vértice del triángulo. Sólo por una cuestión de estética.

En esta demo empleo algún elemento más en el html porque utilizo el pseudoelemento :before del 'section' para que éste elemento tenga una relación de aspecto 16:9. Prueba a redimensionar la ventana en la demo a pantalla completa.

Sencillo, fácil de lograr y vistoso, ¿no?. Si necesitas alguna explicación complementaria haz uso de los comentarios.

Y si decides jugar con esta idea y creas algún ejemplo, deja el enlace en un comentario y lo incluyo en el artículo.

See the Pen Mordisquitos Css 2 by Kseso (@Kseso) on CodePen

Variaciones de lectores

Furoya

See the Pen hAkji by solipsistaCP (@solipsistacp) on CodePen

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso