我如何仅使用CSS和HTML将这两个divs分为这些形状

Question

这些是divs

我尝试使用：

`clip-path:polygon()` 

但是形状有超过12个边缘，我保证我一直在试图弄清楚它很长一段时间，我被卡住了。

Answer 1

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

我建议使用SVG。它们是锋利的，也是无尽的，因为它们是基于向量的。

Answer 2

您可以使用此链接使用创建多边形：http：//bennettfeely.com/clippy/

创建简单的三角形，并尝试了解颜色点和百分比之后的％值，然后您以后可以更改％值以创建任何多边形。

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-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 {
	display: flex;
	justify-content: center;
	align-items: center;
}

<div></div>