如何制作带角度的 css 框？

Question

Polygon Shape

您好，我想制作一个有角度的多边形吗？我想知道是否有人可以指出正确的方向？会不会是先倾斜再缩放这样的变换方法？抱歉，刚接触多边形

提前致谢，

爱德华

Answer 1

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

这里有两种方法：

使用 background: linear-gradient() 并使用多个渐变、角度和停止位置。
使用 ::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>

如何制作带角度的 css 框？

How do you make a css box with angles?

css

polygon

shape