在CSS中使用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转换应用于容器（例如，旋转或倾斜操作），则蒙版将具有旋转或倾斜的形状，并且内容将被剪裁为该形状。一对嵌套口罩，外侧口罩和内侧口罩歪斜，产生一个带有两个倾斜侧面的梯形口罩。只歪斜内面具会产生一个带有一个斜角的梯形。

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