你如何制作一个角度的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>