Trapezoid in HTML with CSS3 Gradient applied to it

Question

I want to make a trapezoid in HTML5. I know it can be done using border radius and a height of 0:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid COLOR HERE;
    height: 0;
    width: 100px;
}

However, I want to apply a CSS3 gradient and the above method only allows solid colors.

The following style will make a parallelogram. But is there a way to skew only one of the sides, instead of both?

-webkit-transform: skew(20deg);

Answer 1

The trick is to create an angled content mask, and then fill in the masked area with the desired styling, in this case a background gradient. The content will be clipped to the shape of the mask.

A mask is simply a container with overflow:hidden. If a CSS3 transform is applied to the container (for instance, a rotation or a skew operation), the mask will have a rotated or skewed shape, and the content will be clipped to this shape. A pair of nested masks, the outer one skewed and the inner one counter-skewed, produces a trapezoid mask with 2 angled sides. Skewing only the inner mask produces a trapezoid with 1 angled side.

          Both masks skewed           Inner mask skewed
          _________________           _________________
         /                 \          |                \
        /  clipped content  \         | clipped content \
       /_____________________\        |__________________\

JSFiddle demos:

• Both masks skewed
• Inner mask skewed

HTML

<div class="main">
    <div class="outer-mask">
        <div class="inner-mask">
            <div class="content">Styled content goes here</div>
        </div>
    </div>
</div>

CSS

.main {
    position: relative;
}
.outer-mask {
    position: absolute;
    left: 95px;
    top: 45px;
    width: 390px;
    height: 110px;
    overflow: hidden;
    -webkit-transform: skew(20deg, 0deg);
        -ms-transform: skew(20deg, 0deg);
         -o-transform: skew(20deg, 0deg);
            transform: skew(20deg, 0deg);
}
.inner-mask {
    position: absolute;
    left: -45px;
    top: 0px;
    width: 390px;
    height: 110px;
    overflow: hidden;
    -webkit-transform: skew(-40deg, 0deg);
        -ms-transform: skew(-40deg, 0deg);
         -o-transform: skew(-40deg, 0deg);
            transform: skew(-40deg, 0deg);
}