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