Is it possible to style a div to be trapezoidal?

Question

I know it\'s possible to skew but I don\'t see a way to skew each corner with a particular degree.

Here\'s the project I\'m working on: http://map.ucf.edu/

L

Answer 1

It is possible, here is the rough idea:

div {
    width: 200px;
    height: 100px;
    background: #ffffd;
    margin: 20px 150px;
    position: relative
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ffffd;
    border-left: 50px solid transparent;
    border-right: 50px solid #ffffd;
    position: absolute;
    top: 0;
    left: -99px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ffffd;
    border-left: 50px solid #ffffd;
    border-right: 50px solid transparent;
    position: absolute;
    top: 0;
    right: -99px;
}

Hello

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus ex quis enim posuere auctor.