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

Question

我想在 HTML5 中制作一个梯形。我知道可以使用边界半径和高度 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

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

掩码只是一个带有overflow:hidden 的容器。如果将 CSS3 变换应用于容器(例如，旋转或倾斜操作)，则 mask 将具有旋转或倾斜的形状，并且内容将被裁剪为该形状。一对嵌套蒙版，外侧一个倾斜，内侧一个反倾斜，生成一个带有 2 个倾斜边的梯形蒙版。仅倾斜内部 mask 会产生一个有 1 个斜边的梯形。

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

JSFiddle 演示:

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