どのように角度でCSSボックスを作っていますか？

Question

Polygon Shape

こんにちは、私は角度のついた多角形を作ろうとしていますか？誰かが正しい方向を指すことができるかどうか疑問に思っていますか？スキューとスケールのような変換方法でしょうか？申し訳ありませんが、ポリゴンに新しいは、事前に

おかげで、

エドワードあなたがこれを使用する予定がありますが、多角形の形状を作成することができ、いくつかの異なる方法がありますか

Answer 1

かなりわからないを整形します。

1. background: linear-gradient()を使用し、グラデーション、角度や停止位置の数と一緒に遊ん：ここ

   は2つの方法があります。

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>