2013-03-19 22 views
7

HTML5'te trapezoid yapmak istiyorum.HTML'de Trapezoid CSS3 Gradyan uygulanmış

#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); 
+2

Eğer başarmak için çalışıyoruz ne bir ** çizim ** gösterebilir CSS? –

cevap

8

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ı:

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

İç ve dış bir maskeye ihtiyacınız yok, sadece bir tane ile yapabilirsiniz. Sadece dış maskeyi, üst, alt, sol, sağa işaret eden köşeleri olan bir rhombus yapın. – Ana

+2

3 farklı trapezoidi gösteren bu demoyu görün http://codepen.io/thebabydino/pen/eAryD – Ana

+0

@Ana: Fikre başlıyorum. İki iç içe geçmiş elemanlar, her ikisi de dönüştürülmüş, dış kısımda bir maske. Ve örneğinizde iç kısım için bir puslu-element kullanılmıştır. Gereken hesaplamalar daha karmaşık olsa da (daha az eğri ve çevirme ile döndürme) daha az maske ve HTML elemanları. Paylaştığın için teşekkürler! –