如何使用css和html將這兩個Div變成這些形狀？

Question

These are the Divs

我試着使用：

`clip-path:polygon()` 

但形狀有超過12個邊，我承諾，我一直在試圖弄明白了的很長一段時間，我堅持..

Answer 1

您可以使用SVG https://www.w3schools.com/graphics/svg_polygon.asp

我會建議使用SVG的。由於它們是基於矢量的，因此它們非常銳利並且具有無限的可擴展性

Answer 2

您可以使用使用這個鏈接創建多邊形：http://bennettfeely.com/clippy/

創建簡單的三角形，並嘗試瞭解下列顏色的點和百分比％的值，然後你可以在以後更改％的值創建任何多邊形。

div { 
 
\t width: 280px; 
 
\t height: 280px; 
 
\t background: #1e90ff; 
 
\t -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); 
 
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); 
 
} 
 

 
/* Center the demo */ 
 
html, body { height: 100%; } 
 
body { 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
}

<div></div>