Wie kann ich diese zwei Divs in diese Formen nur mit CSS und HTML machen?

Question

These are the Divs

Ich habe versucht, zu verwenden:

`clip-path:polygon()` 

Aber die Formen haben mehr als 12 Kanten, ich verspreche, dass ich es herauszufinden für eine lange Zeit versucht habe, und ich bin stecken ..

Answer 1

Sie SVG verwenden können https://www.w3schools.com/graphics/svg_polygon.asp

würde ich empfehlen, SVG verwenden. Sie sind scharf und auch endlos skalierbar, da sie vektorbasiert sind.

Answer 2

können Sie erstellen verwenden Polygon über diesen Link: http://bennettfeely.com/clippy/

einfaches Dreieck erstellen und versuchen, die% -Werte nach den Farbpunkten und den Prozentsatz zu verstehen, und dann können Sie% Werte später ändern jedes Polygon zu erstellen.

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>