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

Question

当您使用 Mobile Safari 转到页面 http://m.google.com 时，您会看到页面顶部的漂亮栏。

我想画一些这样的梯形（美国：梯形），但我不知道怎么画。我应该使用 css3 3d 变换吗？如果你有实现它的好方法，请告诉我。

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>

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

Answer 3

简单的方法

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

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

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

带有可重复使用的代码

如果你想让它更具适应性，你可以定义一个 Sass mixin 像：

@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);
}

Answer 4

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

另一方面，使用 css 转换意味着您必须将形状 div 放在背景中，然后在另一个元素中将实际文本叠加在它们之上，以使文本也不会倾斜。同样，不能保证浏览器支持。

Answer 5

这是一个老问题...但我想添加一个尚未提及的方法。可以用半色半透明的渐变绘制三角形，然后可以从 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>