Trapez in HTML mit CSS3 Gradient angewendet

Question

Ich möchte ein Trapez in HTML5 machen. Ich weiß, kann es Grenze Radius und eine Höhe von 0 durchgeführt werden:

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

Ich möchte jedoch ermöglicht eine CSS3 Gradient und das obige Verfahren anzuwenden nur Unifarben.

Der folgende Stil erstellt ein Parallelogramm. Aber gibt es einen Weg, nur eine der Seiten zu schief zu machen, anstatt beides?

-webkit-transform: skew(20deg); 

Answer 1

Der Trick besteht darin, ein angled content mask und dann füllt den maskierten Bereich mit dem gewünschten Design, in diesem Fall eine Hintergrund-Gradienten zu erzeugen. Der Inhalt wird an die Form der Maske angepasst. Eine Maske ist einfach ein Behälter mit overflow:hidden. Wenn eine CSS3-Transformation auf den Container angewendet wird (z. B. eine Drehung oder eine Schräglaufoperation), hat die Maske eine gedrehte oder verzerrte Form, und der Inhalt wird auf diese Form zugeschnitten. Ein Paar verschachtelte Masken, die äußere schief und die innere verschachtelt, erzeugt eine trapezförmige Maske mit 2 abgewinkelten Seiten. Wenn nur die innere Maske verdreht wird, entsteht ein Trapez mit einer angewinkelten Seite.

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

JSFiddle Demos:

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