应用了CSS3渐变的HTML中的梯形

Question

我想在HTML5中制作一个梯形.我知道可以使用border radius和0的高度来完成:

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

但是,我想应用CSS3渐变,上面的方法只允许纯色.

以下样式将生成平行四边形.但有没有办法只偏斜一方,而不是两者？

-webkit-transform: skew(20deg);

Answer 1

诀窍是创建一个有角度的内容蒙版,然后用所需的样式填充蒙版区域,在本例中为背景渐变.内容将被剪裁为蒙版的形状.

面具只是一个容器overflow:hidden.如果将CSS3变换应用于容器(例如,旋转或倾斜操作),则蒙版将具有旋转或倾斜的形状,并且内容将被剪裁为此形状.一对嵌套的面具,外面的一个歪斜,内面的一个反向歪斜,产生一个带有2个倾斜边的梯形面具.仅歪斜内部面罩会产生一个带有1个倾斜边的梯形.

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

JSFiddle演示:

• 两个面具都歪斜了
• 内蒙版歪斜

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);
}