Cum de a desena un trapez/trapez cu css3?

Când accesați pagina http://m.google.com utilizând Mobile Safari, veți vedea bara frumoasă în partea de sus a paginii.

Vreau să trag niște trapezuri (SUA: trapezoizi) așa, dar nu știu cum. Ar trebui să folosesc css3 3d transforma? Dacă aveți o metodă bună de realizat, vă rog să-mi spuneți.

23
Poate că mi-e dor de ceva, dar nu este doar o imagine gradient aplicată pe eticheta corporală? Dacă așa ai putea folosi gradienții css3 ... nu știu ce înseamnă "trapezii".
adăugat autor chovy, sursa
Te referi la bara de navigare? Este o imagine: google.com/mobile/ images/mgc3/MGC-corp-bara de instrumente-bg-banner.png
adăugat autor Blender, sursa
În SUA, spunem "trapezoid" pentru un patrulater cu o pereche de laturi paralele și "trapez" pentru un patrulater fără părți paralele. În afara SUA, "trapez" = US :: "trapezoid", iar US :: "trapezul" este doar "neregulat". Cunoașterea este jumătate din bătălie ~
adăugat autor Andrew Kozak, sursa

3 răspunsuri

Aveți posibilitatea să utilizați câteva CSS, cum ar fi:

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

Este foarte cool să faceți toate aceste forme, Aruncați o privire la forme mai frumoase la:

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

EDITAȚI | ×: Acest CSS este aplicat unui element DIV

38
adăugat
Multumesc mult! Am vazut acest site inainte, dar am uitat aseara! Am rezolvat problema. Cu adevarat va multumesc!
adăugat autor CashLee李秉骏, sursa
@Kishan: Verificați acest răspuns pentru trapezoidul receptiv stackoverflow.com/a/26628030/933633
adăugat autor TheCarver, sursa
Domnule, vreau o formă trapziodă receptivă. poți să-mi spui ceva?
adăugat autor Kishan, sursa
sunteți binevenit, este unul dintre site-urile mele preferate, puteți găsi o mulțime de informații utile acolo.
adăugat autor ElHacker, sursa

Deoarece acest lucru este destul de vechi acum, simt că ar putea folosi cu unele noi răspunsuri actualizate cu unele tehnologii noi.

Perspectiva transformării CSS

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

pânză

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

var c = document.getElementById("mypânză");
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
adăugat

Aveți câteva opțiuni disponibile pentru dvs. Puteți folosi în mod simplu o imagine, puteți desena ceva cu SVG sau puteți distorsiona o div divizată cu transformări css. O imagine ar fi cea mai ușoară și ar funcționa în toate browserele. Desenarea în svg este un pic mai complexă și nu este garantată să funcționeze peste bord.

Folosirea transformărilor CSS pe de altă parte ar însemna că va trebui să aveți forma dvs. divs în fundal, apoi stratul textul actual peste ele într-un alt element la faptul că textul nu este înclinat, de asemenea. Din nou, suportul pentru browser nu este garantat.

1
adăugat