Trapezoid w HTML z CSS3 Gradient zastosowany do niego

Question

Chcę utworzyć trapez w HTML5. Wiem, że można to zrobić za pomocą promienia granicznego i wysokości 0:

#trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid COLOR HERE; 
    height: 0; 
    width: 100px; 
} 

Jednak chcę zastosować gradient CSS3 i powyższa metoda pozwala tylko jednolite kolory.

Poniższy styl spowoduje równoległobok. Ale czy istnieje sposób na przekrzywienie tylko jednej ze stron, zamiast obu?

-webkit-transform: skew(20deg); 

Answer 1

Trick jest stworzenie angled content mask, a następnie wypełnić zamaskowanym obszarze żądanego stylizacji, w tym przypadku do gradientu. Treść zostanie przycięta do kształtu maski.

Maska jest po prostu pojemnikiem z overflow:hidden. Jeśli do kontenera zostanie zastosowana transformacja CSS3 (na przykład obrót lub przekrzywienie), maska ​​będzie miała obrócony lub przekrzywiony kształt, a treść zostanie przycięta do tego kształtu. Para zagnieżdżonych masek, zewnętrzna skośna i wewnętrzna przeciwnie skośna, tworzy trapezową maskę z 2 kątowymi bokami. Krzywizna tylko w wewnętrznej masce tworzy trapez z 1 skośną stroną.

  Both masks skewed   Inner mask skewed 
      _________________   _________________ 
     /    \   |    \ 
     /clipped content \   | clipped content \ 
     /_____________________\  |__________________\ 

JSFiddle dema:

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