Forma con un lado inclinado (sensible)


93

Estoy tratando de crear una forma como en la imagen de abajo con un borde inclinado en un solo lado (por ejemplo, el lado inferior) mientras que los otros bordes permanecen rectos.

CSS div con un lado inclinado

Intenté usar el método de borde (el código se proporciona a continuación) pero las dimensiones de mi forma son dinámicas y, por lo tanto, no puedo usar este método.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}
<div class="shape">
    Some content
</div>


También intenté usar degradados para el fondo (como en el código a continuación) pero se estropea a medida que cambian las dimensiones. Puede ver lo que quiero decir al colocar el cursor sobre la forma en el siguiente fragmento.

¿Cómo puedo crear esta forma con un lado inclinado y también ser capaz de admitir tamaños dinámicos ?

Respuestas:


128

Hay muchas formas de crear la forma con un borde inclinado solo en un lado.

Los siguientes métodos no pueden admitir tamaños dinámicos como ya se mencionó en la pregunta:

  • Método del triángulo de borde con valores de píxeles para border-width.
  • Degradados lineales con la sintaxis del ángulo (como 45 grados, 30 grados, etc.).

Los métodos que pueden admitir tamaños dinámicos se describen a continuación.


Método 1 - SVG

( Compatibilidad del navegador )

SVG se puede usar para producir la forma usando polygons o paths. El siguiente fragmento hace uso de polygon. Cualquier contenido de texto requerido se puede colocar encima de la forma.

Pros

  • SVG está diseñado para producir gráficos escalables y puede funcionar bien con todos los cambios de dimensión.
  • Los bordes y el efecto de desplazamiento se pueden lograr con una sobrecarga de codificación mínima.
  • También se puede proporcionar una imagen o un fondo degradado a la forma.

Contras

  • El soporte del navegador es probablemente el único inconveniente porque IE8- no es compatible con SVG, pero eso se puede mitigar usando bibliotecas como Raphael y también VML. Además, el soporte del navegador no es de ninguna manera peor que las otras opciones.

Método 2 - Fondo degradado

( Compatibilidad del navegador )

Los degradados lineales aún se pueden usar para producir la forma, pero no con ángulos como se menciona en la pregunta. Tenemos que usar la to [side] [side]sintaxis (gracias a vals ) en lugar de especificar ángulos. Cuando se especifican los lados, los ángulos de degradado se ajustan automáticamente según las dimensiones del contenedor.

Pros

  • La forma se puede lograr y mantener incluso si las dimensiones del contenedor son dinámicas.
  • El efecto de desplazamiento se puede agregar cambiando el color del degradado.

Contras

  • El efecto de desplazamiento se activará incluso cuando el cursor esté fuera de la forma pero dentro del contenedor.
  • Agregar bordes requeriría manipulaciones de degradado complicadas.
  • Los degradados son conocidos por producir esquinas irregulares cuando el ancho (o alto) es muy grande.
  • No se pueden utilizar fondos de imagen en la forma.

Método 3 - Transformaciones sesgadas

( Compatibilidad del navegador )

En este método, se agrega un pseudo-elemento, sesgado y posicionado de tal manera que parezca que uno de los bordes está inclinado / en ángulo. Si el borde superior o inferior está inclinado, el sesgo debe estar a lo largo del eje Y, de lo contrario el la rotación debe ser a lo largo del eje X. El transform-origindebe tener el lado opuesto al lado inclinado.

Pros

  • La forma se puede lograr incluso con bordes.
  • El efecto de desplazamiento se limitará a la forma.

Contras

  • Las dimensiones deben aumentar proporcionalmente para que se mantenga la forma porque cuando un elemento está sesgado, su desplazamiento en el eje Y aumenta a medida que widthaumenta y viceversa (intente aumentar el widtha 200pxen el fragmento). Puede encontrar más información sobre esto aquí .

Método 4 - Transformaciones de perspectiva

( Compatibilidad del navegador )

En este método, el contenedor principal se gira a lo largo del eje X o Y con un poco de perspectiva. Establecer el valor apropiado en transform-originproduciría un borde inclinado en un solo lado.

Si el lado superior o inferior está inclinado, la rotación debe ser a lo largo del eje Y, de lo contrario, la rotación debe ser a lo largo del eje X. El transform-origindebe tener el lado opuesto al lado inclinado.

Pros

  • La forma se puede lograr con bordes.
  • Las dimensiones no necesitan aumentar proporcionalmente para mantener la forma.

Contras

  • El contenido también se rotará y, por lo tanto, tendrá que girar en sentido contrario para que parezca normal.
  • Colocar el texto será tedioso si las dimensiones no son estáticas.

Método 5 - Ruta del clip CSS

( Compatibilidad del navegador )

En este método, el contenedor principal se recorta en la forma requerida utilizando un polígono. Los puntos del polígono deben modificarse según el lado donde se requiera el borde inclinado.

Pros

  • La forma se puede mantener incluso cuando se cambia el tamaño del contenedor de forma dinámica.
  • El efecto de desplazamiento estará perfectamente restringido dentro de los bordes de la forma.
  • La imagen también se puede utilizar como fondo para la forma.

Contras

  • El soporte del navegador es muy deficiente en la actualidad.
  • Se pueden agregar bordes colocando un elemento absolutamente posicionado en la parte superior de la forma y dándole el clip necesario, pero más allá de un punto, no encaja bien cuando se redimensiona dinámicamente.

Método 6 - Lienzo

( Compatibilidad del navegador )

Canvas también se puede utilizar para producir la forma dibujando trazados. El siguiente fragmento tiene una demostración. Cualquier contenido de texto requerido se puede colocar encima de la forma.

Pros

  • La forma se puede lograr y mantener incluso si las dimensiones del contenedor son dinámicas. También se pueden agregar bordes.
  • El efecto de desplazamiento se puede restringir dentro de los límites de la forma mediante el pointInpathmétodo.
  • También se puede proporcionar una imagen o un fondo degradado a la forma.
  • Mejor opción si se necesitan efectos de animación en tiempo real, ya que no requiere manipulación DOM.

Contras

  • El lienzo se basa en ráster y, por lo tanto, los bordes en ángulo se pixelarán o difuminarán cuando se escalen más allá de un punto * .

* - Evitar la pixelación necesitaría volver a pintar la forma cada vez que se cambia el tamaño de la ventana gráfica. Hay un ejemplo de esto aquí, pero es una sobrecarga.


36

Intenté usar el método del borde, pero las dimensiones de mi forma son dinámicas y, por lo tanto, no puedo usar este método.


Método 7 - Unidades de ventana gráfica (Border Redux )

( Compatibilidad del navegador )

Las unidades de visualización son una gran innovación en CSS3. Si bien generalmente puede usar valores porcentuales para dinamizar sus propiedades, no puede hacerlo para border-widths ( ni para font-sizes ).

En cambio, con Unidades de ventana gráfica puede establecer dinámicamente el ancho de sus bordes , junto con los tamaños de sus objetos, en comparación con la dimensión de la ventana gráfica.

Nota: los valores porcentuales se refieren al objeto principal, no a la ventana gráfica (área visible de la ventana).

Para probar el método, inicie el siguiente fragmento de página completa y cambie su tamaño tanto horizontal como verticalmente.

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}
<div class="shape">Some content</div>

Ventajas : (1) Todo es dinámico, la cobertura del navegador es amplia.

Contras - (1) se debe prestar atención a la forma en que su sistema operativo se encarga de la barra de desplazamiento con overflow: auto;.


3
Parece irregular en la última versión de Chrome.
Mr_Green

¡Cierto! Supongo que los motores de los navegadores todavía necesitan algo de tiempo para procesar esto sin problemas. Firefox también tiene este problema cuando usa esta técnica con píxeles en lugar de unidades de ventana gráfica, pero se puede solucionar usando rgba (,,, 0) en lugar de transparente. Por suerte ahora mismo tenemos otras opciones;)
Andrea Ligios

1

Mi solución está inspirada en el llamado Método 7 - Unidades de ventana de Andrea Ligios, arriba en esta página.

También utilicé la unidad "horizontal" para la altura ( height:10vw) para mantener las proporciones dadas en el trapezoide al cambiar el tamaño del ancho de la ventana de navegación. Podríamos llamar a esto Método 7b - Ancho de la ventana gráfica .

Además, el uso de dos divs anidados , en lugar de uno y el :afterselector, permite un mejor ajuste de los estilos de contenido de texto, en mi opinión (por ejemplo text-align, etc.).

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}
<div class="dtrapz">
  <div class="dtcont">Some content</div>
</div>


@ Downvoter ¡Hola! Déjame saber qué hay de malo en mi respuesta, para que pueda editarla o eliminarla si esto tiene sentido. No soy un especialista, pero me parece que esto podría aplicarse en muchas páginas, trabajar con contenido de texto más largo, dependiendo solo del ancho :)
MattAllegro
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.