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.
-
Lo pongo como posible duplicado aunque en el otro ejemplo sea un botón ya que el efecto que se pretende es el mismo.– Francisco RomeroCommented 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.– WTFChampCommented el 4 oct. 2017 a las 4:58
Añade un comentario
|
1 respuesta
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>