Forma con un lado inclinado (sensible)

Resuelto four-eyes asked hace 9 años • 0 respuestas

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 del 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>
Expandir fragmento


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

Mostrar fragmento de código

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

four-eyes avatar May 25 '15 21:05 four-eyes
Aceptado

Hay muchas maneras 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 sintaxis de á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.

Mostrar fragmento de código

Ventajas

  • 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 mínima sobrecarga de codificación.
  • También se puede proporcionar una imagen o un fondo degradado a la forma.

Contras

  • La compatibilidad con el navegador es probablemente el único inconveniente porque IE8 no es compatible con SVG, pero eso se puede mitigar mediante el uso de bibliotecas como Raphael y también VML. Además, la compatibilidad del navegador no es en absoluto peor que las otras opciones.

Método 2: fondo degradado

( Compatibilidad del navegador )

Aún se pueden usar degradados lineales 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.

Mostrar fragmento de código

Ventajas

  • La forma se puede lograr y mantener incluso si las dimensiones del contenedor son dinámicas.
  • Se puede agregar el efecto de desplazamiento 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 complicadas de gradiente.
  • 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 pseudoelemento, se sesga y se coloca de tal manera que parezca que uno de los bordes está inclinado/en ángulo. Si el borde superior o inferior está inclinado, la inclinación debe ser a lo largo del eje Y, de lo contrario el La rotación debe ser a lo largo del eje X. Debe transform-origintener el lado opuesto al lado inclinado.

Mostrar fragmento de código

Ventajas

  • La forma se puede lograr incluso con bordes.
  • El efecto de desplazamiento se restringirá dentro de 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 widthen 200pxel fragmento). Puedes 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 transform-originproduciría un borde inclinado en un solo lado.

Si el lado superior o inferior está inclinado, la rotación debe realizarse a lo largo del eje Y; de lo contrario, la rotación debe realizarse a lo largo del eje X. Debe transform-origintener el lado opuesto al lado inclinado.

Mostrar fragmento de código

Ventajas

  • La forma se puede lograr con bordes.
  • No es necesario que las dimensiones aumenten proporcionalmente para que se mantenga la forma.

Contras

  • El contenido también se rotará y, por lo tanto, será necesario rotarlo 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 mediante un polígono. Los puntos del polígono se deben modificar dependiendo del lado donde se requiera el borde inclinado.

Mostrar fragmento de código

Ventajas

  • La forma se puede mantener incluso cuando el contenedor cambia de tamaño dinámicamente.
  • El efecto de desplazamiento quedará perfectamente restringido dentro de los límites 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 encima de la forma y dándole el clip necesario, pero más allá de un punto no encaja bien al cambiar el tamaño dinámicamente.

Método 6: lienzo

( Compatibilidad del navegador )

El lienzo 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.

Mostrar fragmento de código

Ventajas

  • 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 uso pointInpathdel método.
  • También se puede proporcionar una imagen o un fondo degradado a la forma.
  • Es una mejor opción si se necesitan efectos de animación en tiempo real, ya que no requiere manipulación DOM.

Contras

  • El lienzo está basado en tramas y, por lo tanto, los bordes en ángulo se pixelarán o se difuminarán cuando se escale más allá de un punto * .

* - Para evitar la pixelación sería necesario volver a pintar la forma cada vez que se cambia el tamaño de la ventana gráfica. Hay un ejemplo aquí , pero es un gasto general.

Harry avatar May 25 '2015 14:05 Harry

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 Viewport son una gran innovación en CSS3. Si bien normalmente puedes usar valores porcentuales para dinamizar tus propiedades, no puedes hacerlo para border-widths ( ni para font-sizes ).

En cambio, con Unidades de ventana gráfica puede establecer dinámicamente el ancho de los 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>
Expandir fragmento

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

Contras : (1) Debes prestar atención a cómo tu sistema operativo maneja la barra de desplazamiento con overflow: auto;.

Andrea Ligios avatar May 28 '2015 16:05 Andrea Ligios

Mi solución está inspirada en la llamada Método 7: Unidades de ventana gráfica 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 este Método 7b: Ancho de la ventana gráfica .

Además, en mi opinión, usar dos divmensajes anidados, en lugar de uno y el :afterselector, permite un mejor ajuste de los estilos del contenido del texto (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>
Expandir fragmento

MattAllegro avatar Apr 20 '2019 07:04 MattAllegro