Css3 bilan trapetsiyani qanday tuzish mumkin?

Mobil Safari dasturidan foydalangan holda http://m.google.com sahifasiga kirganingizda, chiroyli barni ko'rasiz sahifaning yuqori qismida.

Men shunga o'xshash trapeziyalarni (AQSh: trapezoidlar) chizishga harakat qilmoqchiman, lekin qanday qilib bilmayman. Css3 3d konvertatsiyasini ishlatishim kerakmi? Bunga erishish uchun yaxshi usul bo'lsa, iltimos, menga ayting.

23
Ehtimol, men biror narsadan bexabar bo'lsam ham bo'ladi, lekin bu faqatgina tananing tagiga tatbiq etilgan degradiy tasvir emasmi? Agar shunday bo'lsa, siz css3 gradyanidan foydalanishingiz mumkin ... Men "trapeziumlar" nima degani emas.
qo'shib qo'ydi muallif chovy, manba
Siz navigatsiya panelini nazarda tutasizmi? Bu rasm: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
qo'shib qo'ydi muallif Blender, manba
AQShda biz bir juft parallel tomoni bilan to'rtburchak uchun "trapezoid" va to'rtburchak uchun "trapeziya" deymiz. AQSh tashqari, "trapezium" = US :: "trapezoid" va US :: "trapezium" faqat "tartibsizlik". Bilish yarmining jangi
qo'shib qo'ydi muallif Andrew Kozak, manba

3 javoblar

Siz shunday CSS-dan foydalanishingiz mumkin:

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

Bularning barchasini bajarish, albatta, juda ajoyib,

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

EDIT: Ushbu CSS bir DIV elementiga qo'llaniladi

38
qo'shib qo'ydi
Sizga juda minnatdorman! Men bu veb-saytni avval ko'rgan edim, lekin kecha uni unutgan edim! Men bu muammoni hal qildim.
qo'shib qo'ydi muallif CashLee李秉骏, manba
@Kishan: javobni aniq trapez uchun javobni ko'ring stackoverflow.com/a/26628030/933633
qo'shib qo'ydi muallif TheCarver, manba
janob, men javob beruvchi trapziod shakli istayman. Menga bu haqda biror narsa aytib bera olasizmi?
qo'shib qo'ydi muallif Kishan, manba
xush kelibsiz, bu mening sevimli saytlardan biri, siz u erda foydali ma'lumotni topishingiz mumkin.
qo'shib qo'ydi muallif ElHacker, manba

Bu juda qadimgi ekan, ba'zi yangi texnologiyalar bilan yangilangan ba'zi javoblar bilan foydalanishim mumkinligini his qilyapman.

CSS Transform Perspektivi

<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
qo'shib qo'ydi

Sizda mavjud bo'lgan bir nechta variant mavjud. Siz oddiygina tasvirni ishlatishingiz, SVG bilan biror narsa chizishingiz yoki CSS o'zgartirgichlar bilan muntazam divani buzishingiz mumkin. Tasvir eng oson bo'lib, barcha brauzerlarda ishlaydi. SVG-da chizish biroz murakkab va kartada ishlash uchun kafolatlanmagan.

Boshqa tomondan, CSS-ni ishlatish sizning foningizni div shaklida bo'lishi kerak, degan ma'noni anglatadi, keyin matnni boshqa elementga yozib qo'yishi kerak, bu matn matnning yonib ketmasligi kerak. Shunga qaramay brauzer yordami kafolatlanmaydi.

1
qo'shib qo'ydi