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