用html + css 写一个不规则的正方形

以下是一个使用HTML和CSS编写的不规则正方形示例：

<!DOCTYPE html>
<html>
<head>
	<title>不规则正方形</title>
	<style>
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.square {
			width: 150px;
			height: 150px;
			background-color: #3f51b5;
			transform: rotate(45deg);
			clip-path: polygon(0px 50px, 50px 0px, 100px 50px, 50px 100px);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="square"></div>
	</div>
</body>
</html>

解释：

使用 transform: rotate(45deg); 使元素旋转45度，变成一个菱形。
使用 clip-path: polygon(0px 50px, 50px 0px, 100px 50px, 50px 100px); 剪切元素，使其变成一个不规则的正方形。
使用 display: flex; 和 justify-content: center; 和 align-items: center; 属性将元素垂直和水平居中。
height: 100vh; 属性将容器的高度设置为视口高度，使其填充整个屏幕。