html - attribute - Fronteras sesgadas en una división

title html css

Question

Estoy intentando sesgar un div, similar a esto: inclinar la parte superior de un div usando css sin sesgar el texto o esto: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Aquí hay una imagen de lo que estoy tratando de hacer:

Básicamente, necesito inclinar los bordes de manera extraña en los 4 lados . Puedo hacer esto con imágenes de fondo, pero preferiría alguna forma de hacerlo en CSS para que los divs puedan responder en anchura y altura. Me gustaría encontrar una solución que funcione en navegadores antiguos, pero entiendo que no puedo tener todo.

¿Cuál sería la mejor manera de tener bordes inclinados en los 4 lados? (Nota: el borde en la parte inferior del cuadro verde se inclina hacia arriba en el medio y hacia abajo en el exterior, y NO necesito los bordes para hacer esto. Solo una inclinación en una dirección es buena).

Answer 1

Pude hacer algo muy similar ... funciona en todos los navegadores modernos.

HTML - Bastante simple

div:nth-child(1) {
background: rgb(122, 206, 122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}
div:nth-child(2) {
border-bottom: 180px solid rgb(233, 233, 65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}
div:nth-child(3) {
border-top: 140px solid rgb(253, 74, 74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}
div:nth-child(3):before {
content: '''';
width: 124%;
height: 80px;
background: white;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}

<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>

Demostración de pantalla completa ---- jsFiddle demo

Answer 2

También puedes usar "clip-path" y establecer cualquier forma que necesites. PS JS es solo para transformar cada 2 segundos.

var wrapper = document.querySelector(".wrapper");
var textBlock = document.querySelector(".text-block");
function gRI(max) { // getRandomInt
return Math.floor(Math.random() * Math.floor(max));
}
setInterval(function(){
// new color
let newColor = "rgb(" + gRI(255) + "," + gRI(255) + "," + gRI(255) +")";
wrapper.style["background-color"] = newColor;
// new shape
let newShape =
"polygon(" +
gRI(40) + "px " + gRI(40) + "px, " + // top left
gRI(40) + "px " + "calc(100% - " + gRI(40) + "px), " + // top right
"calc(100% - " + gRI(40) + "px) " + "calc(100% - " + gRI(40) + "px), " +
"calc(100% - " + gRI(40) + "px) " + gRI(40) + "px " +
")";
textBlock.innerHTML = "clip-path: " + newShape +
" <br><br> background-color: " + newColor;
wrapper.style["clip-path"] = newShape;
}, 2000)

.wrapper{
box-sizing: border-box;
width: 90%;
min-width: 200px;
margin: 25px auto;
padding: 50px;
background-color: lightgray;
transition: 0.5s;
clip-path: polygon( 25px 25px, 25px calc(100% - 25px), calc(100% - 25px) calc(100% - 25px), calc(100% - 25px) 25px );
}
.text-block{
width: 100%;
}

<div class="wrapper">
<div class="text-block">Changes every 2 seconds...</div>
</div>