Footer div with slated edge and border - html

Question

I'm building a footer which has a slated top and border :
Is there any way to achieve this in CSS (with transforms perhaps) without having to resort to SVG ?
Thanks

Answer 1

Try this - http://jsfiddle.net/QBxhd/
body {
overflow-x: hidden;
}
footer {
height: 100px;
position: relative;
background: #000;
margin-top: 200px;
}
footer:before, footer:after {
content: '';
display: block;
position: absolute;
height: 40px;
width: 102%;
background: #ccc;
top: -30px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
zoom: 1;
}
footer:after {
background: #000;
top: -23px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-2deg);
zoom: 1;
}
​

Answer 2

I would think that using two div that lie on each other, having grey and black as color could do this. turn an position them to the wanted place, and sort them with the z-index.

Answer 3

Or this: http://jsfiddle.net/faceleg/tQtZY/
<div class="grey"></div>
<div class="black"></div>​
.grey, .black {
width: 100%;
height: 100px;
position: absolute;
margin-bottom: -20px;
bottom: 0px;
}
.grey {
background-color: gray;
z-index: 10;
-moz-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.black {
background-color: black;
z-index: 11;
-moz-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}​

Answer 4

just another way http://jsfiddle.net/uttara/XrVzx/3/
<div id="footer"></div>
#footer{
width:500px;
height:100px;
margin:50px auto;
background-color:black;
}
#footer:after{
border-bottom: 30px solid black;
border-left: 500px solid transparent;
height: 0;
width: 0;
top:20px;
content:"";
position:absolute;
}
#footer:before{
border-bottom: 40px solid grey;
border-left: 500px solid transparent;
height: 0;
width: 0;
top:10px;
content:"";
position:absolute;
}
​