如何用css3绘制梯形/梯形?

当您使用Mobile Safari转到 http://m.google.com 页面时,您会看到美丽的酒吧在页面顶部。

我想画一些像这样的梯形(美国:梯形),但我不知道如何。我应该使用css3三维变换吗?如果你有一个很好的方法来实现它,请告诉我。

23
也许我错过了一些东西,但这不仅仅是一个应用于身体标签的渐变图像吗?如果是这样你可以使用css3渐变......我不知道“梯形”是什么意思。
额外 作者 chovy,
你的意思是导航栏?这是一张图片: google.com/mobile/图像/ mgc3/MGC-体工具栏-BG-banner.png
额外 作者 Blender,
在美国,对于具有一对平行边的四边形,我们说“梯形”,对于没有平行边的四边形,我们称“梯形”。在美国之外,“trapezium”= US ::“trapezoid”,而US ::“trapezium”只是“不规则”。知道是一半的战斗〜
额外 作者 Andrew Kozak,

3 答案

你可以像这样使用一些CSS:

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

制作所有这些形状真的很酷,看看更好的形状:

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

编辑: 该css应用于DIV元素

38
额外
非常感谢!!!我以前见过这个网站,但我昨晚忘记了!我已经解决了这个问题。真的很感谢你!
额外 作者 CashLee李秉骏,
@Kishan:查看响应梯形的答案 stackoverflow.com/a/26628030/933633
额外 作者 TheCarver,
先生,我想要响应trapziod形状。你能跟我说说什么吗?
额外 作者 Kishan,
欢迎您,这是我最喜欢的网站之一,您可以在那里找到很多有用的信息。
额外 作者 ElHacker,

由于现在已经很老了,我觉得它可以使用一些新技术的新更新答案。

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>

帆布

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

var c = document.getElementById("my帆布");
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();
<��������������������
�iv> </div>
26
额外

您有几个选择。您可以简单地使用图像,使用svg绘制内容或使用css变换扭曲常规div。图像将是最简单的,并且可以在所有浏览器中使用。在svg中绘图有点复杂,并不能保证全面工作。

另一方面,使用css变换意味着你必须在背景中拥有你的形状div,然后将实际文本分层放在另一个元素中,以使文本也不会偏斜。同样,不保证浏览器支持。

1
额外