如何使用CSS3绘制梯形/梯形图形？

Question

当您使用移动版Safari浏览器访问http://m.google.com页面时，您会看到页面顶部有一个漂亮的工具栏。

我想画一些类似的梯形，但我不知道如何做。我应该使用CSS3 3D变换吗？如果您有好的方法，请告诉我。

- CashLee李秉骏

---

你是指导航栏吗？它是一张图片：http://www.google.com/mobile/images/mgc3/mgc-body-toolbar-bg-banner.png - Blender

也许我漏掉了什么，但这不只是一个应用于body标签的渐变图像吗？如果是这样，您可以使用css3渐变...我不知道“梯形”是什么意思。 - chovy

在美国，我们称具有一对平行边的四边形为“trapezoid”，而称没有平行边的四边形为“trapezium”。在美国以外，“trapezium”等同于美国的“trapezoid”，而美国的“trapezium”仅表示“irregular”。知道就是成功的一半~ - Andrew Kozak

Answer 1

由于这篇文章很旧了，我觉得需要一些新的更新答案，应用一些新技术。

CSS变换透视

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

<div class="trapezoid"></div>

SVG

<svg viewBox="0 0 20 20" width="20%">
  <path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>

画布

var c = document.getElementById("myCanvas");
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();

<canvas id="myCanvas" width="200" height="200"></canvas>

- Stewartside

---

以下是有关编程的内容，请将其从英语翻译成中文。仅返回翻译后的文本：第一部分应该是最佳答案 - Firanolfind

我喜欢这个被接受的答案，但是由于我正在使用它在一个关键帧animation内部，所以我不得不使用CSS transform，这也包含在这个答案中。 - Jacksonkr

这也会产生梯形的 box-shadow！ - Timar Ivo Batis

如果您不希望对梯形内部的文本应用相同的转换，请记得为内部元素反转转换: transform: perspective(10px) rotateX(-1deg); - John

Answer 2

您可以使用以下CSS：

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div id="trapezoid"></div>

制作所有这些形状真的很酷，可以看看更多漂亮的形状：

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

编辑： 这个CSS应用于一个DIV元素。

- ElHacker

---

非常感谢！！！我之前看过这个网站，但昨晚忘记了它！我已经解决了问题。真的非常感谢你！ - CashLee李秉骏

不客气，那是我最喜欢的网站之一，你可以在那里找到很多有用的信息。 - ElHacker

先生，我想要一个响应式梯形形状。你能告诉我有关它的任何信息吗？ - Kishan

@Kishan：看看这个响应梯形的答案吧 http://stackoverflow.com/a/26628030/933633 - TheCarver

Answer 3

简单的方法

要绘制任何形状，可以使用CSS的clip-path属性，如下所示。

您可以使用免费在线编辑器生成此代码（例如：https://bennettfeely.com/clippy/）

.trapezoid {
    clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}

通过可重复使用的代码

如果您希望它更具适应性，可以定义一个Sass混合器，如下所示：

@mixin trapezoid ($top-width, $bottom-width, $height) {
    $width: max($top-width, $bottom-width);
    $half-width-diff: abs($top-width - $bottom-width) / 2;

    $top-left-x: 0;
    $top-right-x: 0;
    $bottom-left-x: 0;
    $bottom-right-x: 0;

    @if ($top-width > $bottom-width) {
        $top-left-x: 0;
        $top-right-x: $top-width;
        $bottom-left-x: $half-width-diff;
        $bottom-right-x: $top-width - $half-width-diff;
    } @else {
        $top-left-x: $half-width-diff;
        $top-right-x: $bottom-width - $half-width-diff;
        $bottom-left-x: 0;
        $bottom-right-x: $bottom-width;
    }

    clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
    
    width: $width;
    height: $height;
}

然后像这样使用它在所需的元素上（这里参数是 $top-width、$bottom-width 和 $height）：

.my-div {
    @include trapezoid(8rem, 6rem, 2rem);
}

- Skirlyx

---

请注意，div 上的外部阴影将出现在剪切区域之外，因此它不会可见。 - Rokit

Answer 4

这是一个老问题...但我想添加一种未提及的方法。可以使用半色半透明的渐变来绘制三角形，然后可以从3个渐变形状构建梯形。以下是示例代码，3个块以不同颜色绘制，以便更好地理解：

#example {
    width: 250px;
    height: 100px;
    background-image:
        linear-gradient(to top left, red 0 50%, transparent 50% 100%),
        linear-gradient(to top right, green 0 50%, transparent 50% 100%),
        linear-gradient(blue 0 100%);
    background-size:
        20% 100%, 20% 100%, 60% 100%;
    background-position:
        left top, right top, center top;
    background-repeat: no-repeat;
}

<div id="example"></div>

- Noam

Answer 5

你有几个选项可供选择。你可以直接使用图像，在svg中绘制一些内容或使用css变换扭曲常规div。图像是最简单的，可以在所有浏览器上工作。在svg中绘制比较复杂，并不能保证在所有浏览器上都能正常工作。

另一方面，使用css变换意味着你必须将形状div放在背景中，然后在另一个元素中将实际文本覆盖在它们上面，以便文本不会被扭曲。同样，浏览器支持也不能保证。

- name