Comment puis-je faire ces deux Divs dans ces formes en utilisant uniquement css et html?

Question

These are the Divs

J'ai essayé d'utiliser:

`clip-path:polygon()` 

Mais les formes ont plus de 12 Edges, je promets que j'ai essayé de le comprendre pendant une longue période de temps et je suis coincé ..

Answer 1

Vous pouvez utiliser SVG https://www.w3schools.com/graphics/svg_polygon.asp

Je recommanderais d'utiliser SVG de. Ils sont aiguisés et aussi à l'échelle sans fin parce qu'ils sont basés sur le vecteur.

Answer 2

Vous pouvez utiliser créer un polygone en utilisant ce lien: http://bennettfeely.com/clippy/

Créer triangle simple et essayer de comprendre les valeurs% suivant les points de couleur et pourcentage et ensuite vous pouvez modifier les valeurs de% plus tard pour créer un polygone quelconque.

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>