CSS3グラデーションが適用されたHTMLの台形

Question

HTML5で台形を作成したいと思います。

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

は、しかし、私はCSS3グラデーションを適用すると、上記の方法は、固体の色を可能にする：私はそれが国境半径と0の高さを利用して行うことができます知っています。

次のスタイルは平行四辺形を作成します。しかし、両方の代わりに片方だけを歪ませる方法はありますか？

-webkit-transform: skew(20deg); 

Answer 1

トリックは、この場合には、背景勾配をangled content maskを作成し、所望のスタイリングと、マスクされた領域内に充填することです。内容はマスクの形にクリップされます。

マスクは単にoverflow:hiddenのコンテナです。 CSS3変換がコンテナに適用されている場合（回転またはスキュー操作など）、マスクは回転または斜めの形状になり、コンテンツはこの図形にクリップされます。 1対のネストされたマスク、外側の1つは歪められ、内側の2つのマスクは2つの傾斜した側面を有する台形マスクを生成する。内側のマスクのみを傾けると、1つの斜めの側面を持つ台形が作成されます。

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