8

我想在 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);
4

1 回答 1

10

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

掩码只是一个带有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);
}
于 2013-03-19T14:02:49.360 回答