Skewed Borders on a Div

Question

I'm trying to skew a div, similar to this: Slant the top of a div using css without skewing text or this: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Here's an image of what I'm trying to do:

Basically, I need to slant the borders in weird ways on all 4 sides. I can do this with background images, but I'd prefer some way to do this in CSS so the divs can be responsive in width and height. I'd like to find a solution that works on older browsers, but I understand I can't have everything!

What would be the best way to have slanted borders on all 4 sides? (Note: the border on the bottom of the green box slants up in the middle, and down on the outside, and I do NOT need the borders to do this. just a slant in one direction is good.)

Answer 1

I was able to make something very similar.. it works in all modern browsers.

HTML - Pretty 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>

Full Screen Demo ---- jsFiddle demo

Answer 2

Also you can use "clip-path" and set any shape you needed. P.S. JS is only for transforming every 2 seconds.

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>