Css3 ile trapez/trapezoid nasıl çizilir?

Mobil Safari'yi kullanarak http://m.google.com sayfasına gittiğinizde, güzel çubuğu göreceksiniz. sayfanın üstünde.

Böyle bir yamuk (ABD: trapezoid) çizmek istiyorum ama nasıl olduğunu bilmiyorum. Css3 3d dönüşümü kullanmalı mıyım? Bunu başarmak için iyi bir yöntem varsa, lütfen bana söyleyin.

23
Belki bir şeyleri özlüyorum, ama sadece vücut etiketine uygulanan bir degrade görüntü değil mi? Eğer öyleyse css3 gradyanlarını kullanabilseydin ... "yamuk" kelimesinin ne anlama geldiğini bilmiyorum.
katma yazar chovy, kaynak
Gezinme çubuğunu mu kastediyorsun? Bu bir resim: google.com/mobile/ images/mgc3/mgc-beden-araç çubuğu-bg-banner.png
katma yazar Blender, kaynak
ABD'de, bir çift paralel tarafa sahip bir dörtgen ve paralel kenarları olmayan bir dörtgen için "yamuk" için "yamuk" diyoruz. ABD dışında "trapezyum" = ABD :: "trapezoid" ve ABD :: "yamuk" sadece "düzensiz" dir. Bileni savaşın yarısı ~
katma yazar Andrew Kozak, kaynak

3 cevap

Bu şekilde bazı CSS kullanabilirsiniz:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>
</div> </div>

Tüm bu şekilleri yapmak gerçekten çok güzel, daha güzel şekillere bir göz atın:

http://css-tricks.com/examples/ShapesOfCSS/

DÜZENLE: Bu CSS bir DIV öğesine uygulanır

38
katma
Çok teşekkür ederim! Bu siteyi daha önce görmüştüm ama dün gece unuttum! Sorunu çözdüm.Gerçekten Teşekkür ederim!
katma yazar CashLee李秉骏, kaynak
@Kishan: Bu yanıtı duyarlı trapez için stackoverflow.com/a/26628030/933633 inceleyin.
katma yazar TheCarver, kaynak
Efendim, duyarlı trapziod şekli istiyorum. bunun hakkında bir şey söyleyebilir misin?
katma yazar Kishan, kaynak
Hoşgeldin, en sevdiğim sitelerden biri, orada çok yararlı bilgiler bulabilirsiniz.
katma yazar ElHacker, kaynak

Bu oldukça eski olduğu için, bazı yeni teknolojilerle bazı yeni güncellenmiş cevaplarla kullanabileceğini hissediyorum.

CSS Dönüşümü Perspektifi

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>
</div> </div>

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

Tuval

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var c = document.getElementById("myTuval");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();

</div> </div>

26
katma

Kullanabileceğiniz birkaç seçeneğiniz var. Bir görüntüyü sade bir şekilde kullanabilir, svg ile bir şey çizebilir veya CSS dönüşümleri ile normal bir div'i deforme edebilirsiniz. Bir resim en kolay olurdu ve tüm tarayıcılarda çalışırdı. SVG çizim biraz daha karmaşık ve tahta üzerinde çalışmak için garanti edilmez.

Öte yandan, CSS dönüşümlerini kullanmak, sizin arka planınızda şekil div'larınızın olması ve daha sonra metnin de eğilmemesi için başka bir elemanın üzerindeki gerçek metni katmanlaştırmanız gerektiği anlamına gelir. Yine, tarayıcı desteği garanti edilmez.

1
katma