HTML'de Trapezoid CSS3 Gradyan uygulanmış

Question

HTML5'te trapezoid yapmak istiyorum.

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

Ancak, bir CSS3 eğimi uygulamak istediğiniz ve yukarıdaki yöntem yalnızca düz renkler verir: Ben sınır yarıçapı ve 0 bir yüksekliğe kullanılarak yapılabilir biliyorum.

Aşağıdaki stil bir paralelkenar çizecektir. Ama her iki taraf yerine sadece bir tarafını çarpmanın bir yolu var mı?

-webkit-transform: skew(20deg); 

Answer 1

hile, bu durumda, bir arka plan gradyanı bir angled content mask oluşturmak ve daha sonra arzu edilen stil ile maskelenmiş alanda doldurmaktır. İçerik, maskenin şekline kırpılacak.

Maske sadece overflow:hidden numaralı bir kapsayıcıdır. Konteynere bir CSS3 dönüşümü uygulanırsa (örneğin, bir döndürme veya eğme işlemi), maske döndürülmüş veya eğri bir şekle sahip olacak ve içerik bu şekle kırpılacaktır. Bir çift iç içe maskeler, dışa çarpık ve içten çarpık bir iç, 2 açılı yanlara sahip bir yamuk maske üretir. Sadece iç maskeyi eğmek, 1 açılı tarafa sahip bir yamuk üretir.

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

JSFiddle demoları:

• 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> 

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