Hình thang trong HTML với CSS3 Gradient áp dụng cho nó

Question

Tôi muốn tạo hình thang trong HTML5. Tôi biết rằng nó có thể được thực hiện bằng cách sử dụng bán kính đường viền và chiều cao là 0:

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

Tuy nhiên, tôi muốn áp dụng độ dốc CSS3 và phương pháp trên chỉ cho phép màu đồng nhất.

Kiểu sau sẽ tạo hình bình hành. Nhưng có cách nào để chỉ nghiêng một bên, thay vì cả hai?

-webkit-transform: skew(20deg); 

Answer 1

Bí quyết là tạo angled content mask và sau đó điền vào vùng có mặt nạ với kiểu dáng mong muốn, trong trường hợp này là độ dốc nền. Nội dung sẽ được cắt bớt thành hình dạng của mặt nạ.

Mặt nạ chỉ đơn giản là một vật chứa có overflow:hidden. Nếu một chuyển đổi CSS3 được áp dụng cho vùng chứa (ví dụ, xoay hoặc hoạt động nghiêng), mặt nạ sẽ có hình dạng xoay hoặc nghiêng, và nội dung sẽ được cắt bớt thành hình dạng này. Một cặp mặt nạ lồng nhau, mặt nạ bên ngoài bị lệch và mặt trong bị lệch, tạo ra một mặt nạ hình thang với 2 cạnh góc cạnh. Skewing chỉ mặt nạ bên trong tạo ra một hình thang với 1 cạnh góc cạnh.

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

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