Como desenhar um trapézio/trapézio com css3?

Quando você acessar a página http://m.google.com usando o Mobile Safari, verá o lindo bar no topo da página.

Eu quero desenhar alguns trapézios (EUA: trapézios) assim, mas não sei como. Devo usar o css3 3d transform? Se você tem um bom método para alcançá-lo, por favor me diga.

23
Talvez eu esteja sentindo falta de algo, mas não é apenas uma imagem gradiente aplicada à tag body? Se assim você poderia usar gradientes css3 ... Eu não sei o que "trapézio" significa.
adicionado o autor chovy, fonte
Você quer dizer a barra de navegação? É uma imagem: google.com/mobile/ imagens/mgc3/mgc-body-toolbar-bg-banner.png
adicionado o autor Blender, fonte
Nos EUA, dizemos "trapézio" para um quadrilátero com um par de lados paralelos e "trapézio" para um quadrilátero sem lados paralelos. Fora dos EUA, "trapézio" = US :: "trapézio" e US :: "trapézio" é apenas "irregular". Saber é metade da batalha ~
adicionado o autor Andrew Kozak, fonte

3 Respostas

Você pode usar algum CSS assim:

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

É muito legal fazer todas essas formas, dê uma olhada em formas mais legais em:

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

EDITAR: Este CSS é aplicado a um elemento DIV

38
adicionado
muito obrigado !!! Eu já tinha visto este site antes, mas eu esqueci-o ontem à noite! Eu resolvi o problema. Realmente obrigado!
adicionado o autor CashLee李秉骏, fonte
@Kishan: confira esta resposta para o trapezóide responsivo stackoverflow.com/a/26628030/933633
adicionado o autor TheCarver, fonte
senhor, quero uma forma trapziodiva responsiva. você pode me dizer alguma coisa sobre isso?
adicionado o autor Kishan, fonte
de nada, é um dos meus sites favoritos, você pode encontrar muita informação útil lá.
adicionado o autor ElHacker, fonte

Como isso é bastante antigo agora, acho que poderia ser usado com algumas novas respostas atualizadas com algumas novas tecnologias.

Perspectiva de transformação de 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>

Tela de pintura

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

var c = document.getElementById("myTela de pintura");
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
adicionado

Você tem algumas opções disponíveis para você. Você pode simplesmente usar uma imagem, desenhar algo com svg ou distorcer um div regular com transformações css. Uma imagem seria mais fácil e funcionaria em todos os navegadores. Desenhando em svg é um pouco mais complexo e não é garantido que funcione através da placa.

Usar as transformações css, por outro lado, significaria que você teria que ter sua forma divs no plano de fundo, em seguida, sobrepor o texto real sobre eles em outro elemento para que o texto não seja distorcido também. Novamente, o suporte ao navegador não é garantido.

1
adicionado