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变换应用于容器（例如，旋转或倾斜操作），则蒙版将具有旋转或倾斜的形状，并且内容将被剪裁为此形状。一对嵌套的面具，外面的一个歪斜，内面的一个反向歪斜，产生一个带有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);
}

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

1 个答案: