Search code examples
csscss-transformscss-shapesskew

CSS Transform Skew

Does anyone know how to achieve skew like this:

Using CSS's new transform property?

As you can see I'm trying to skew both corners, anyone know if this is possible?

Solution

  • CSS:

    #box {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    -webkit-transition: all 300ms ease-in;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
    display: block;
    content: "\0020";
    color: transparent;
    width: 211px;
    height: 45px;
    background: white;
    position: absolute;
    left: 1px;
    bottom: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
#box:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}​

    HTML:

    <div id=box></div>​

    Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/

    This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/

    And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/