39

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

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

4

5 回答 5

76

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

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>

于 2016-01-26T13:02:39.933 回答
68

你可以像这样使用一些 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 元素

于 2011-10-27T20:36:40.073 回答
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);
}
于 2020-12-19T07:10:23.987 回答
1

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

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

于 2011-10-27T19:00:18.347 回答
0

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

于 2022-02-02T14:17:56.780 回答