简单的方法

Question

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

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

Answer 1

你可以使用这样的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 2

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

CSS转换视角

＆＃13;

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

＆＃13;

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

＆＃13;

SVG

＆＃13;

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

＆＃13;

帆布

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 3

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

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

Answer 4

简单的方法

要绘制任何形状，您可以使用 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);
}

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

4 个答案:

CSS转换视角

SVG

帆布

简单的方法

带有可重用代码