0

Darle forma sesgada a un div

Hola a todos, tengo una duda de qué manera puedo hacer con CSS que mi div se vea así, de sesgado por la mitad, saludos y espero sus comentarios, que tengan un excelente día.

3
  • Lo pongo como posible duplicado aunque en el otro ejemplo sea un botón ya que el efecto que se pretende es el mismo. Commented el 27 sept. 2017 a las 21:37
  • Deberías añadir más información, ¿qué has intentado? ¿cómo se ve lo que llevas hasta el momento? ¿qué problemas/dificultades te estás encontrando?
    – Alvaro Montoro
    Commented el 28 sept. 2017 a las 4:54
  • @FranciscoRomero, en efecto no pretendo aplicar dos colores, mi objetivo es alterar el div como tal, sin que conserve sus bordes rectos. Saludos a todos.
    – WTFChamp
    Commented el 4 oct. 2017 a las 4:58

1 respuesta 1

1

Podrías usar un pseudo-elemento y aplicarle una transformación.

Este sería un ejemplo rápido:

div {
    position: relative;
    width: 400px;
    height: 240px;
    background: purple;
    overflow: hidden;
}

div:before {
    position: absolute;
    top: 0;
    right: -20%;
    bottom: 0;
    left: 50%;
    background: rgba(255,255,255,0.5);
    content: '';
    transform: skew(-30deg);
}
<div></div>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.