Question

我试图使用：

`clip-path:polygon()`

但是这些形状有超过12个边缘，我保证我已经试图解决它很长一段时间而且我被困住了..

Answer 1

您可以使用SVG https://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>

如何才能使用css和html将这两个Div分成这些形状？

2 个答案: