你怎么用角度制作一个css盒？

Question

Polygon Shape

您好我正在尝试制作有角度的多边形形状？我想知道是否有人可以指出正确的方向？它会像歪斜然后缩放一样变换吗？抱歉，对多边形形状不熟悉

先谢谢，

爱德华

Answer 1

不太确定您打算如何使用它，但有几种不同的方法可以创建多边形形状。

以下是两种方式：

1. 使用background: linear-gradient()并使用多个渐变，角度和停止位置。
2. 使用::after伪元素并强制它成为带有边框颜色技巧的斜角三角形

.polygon {
    background: linear-gradient(-14deg, #ddd 21%, transparent 0), linear-gradient(30deg, #ddd 15%, gold 0);
    height: 300px;
    width: 500px;
}

.polygon2 {
    background: gold;
    width: 500px;
    height: 200px;
    position: relative;
}

.polygon2::after {
    content: '';
    border-left: 150px solid transparent;
    border-right: 350px solid transparent;
    border-top: 80px solid gold;
    position: absolute;
    height: 0;
    top: 100%;
    width: 0;
}

<div class="polygon"></div>

<hr>

<div class="polygon2"></div>