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 に答える