Question

请参阅下图并建议我如何编码。

你会怎么做呢？

所有部分都将有不同的颜色和不同的风格。

Answer 1

首先，我认为这不是一个好主意。我使用来自css的旋转来实现他的但是它产生了许多新问题，例如在x轴上移动物体将需要实际移动X和Y轴，因为旋转会影响元素。还有一个问题就是将它们排成一行，但我认为可以使用一些我不知道的巧妙技巧。

下面是我正在谈论的例子

div{
				margin: 0;
				width: 200px;
				height: 200px;
				transform: rotate(-45deg);
				padding-left: 200px;
			}
			#test1{
				background-color: red;
			}
			#test2{
				background-color: green;
			}
			#test3{
				background-color: blanchedalmond;
			}
			#test4{
				background-color: blueviolet;
			}
			#test5{
				background-color: orange;
			}

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
	</head>
	<body>
		<div id="test1">
		1
		</div>
		<div id="test2">
		2
		</div>
		<div id="test3">
		3
		</div>
		<div id="test4">
		4
		</div>
		<div id="test5">
		5
		</div>
	</body>
</html>

我怎样才能制作45度旋转html部分

1 个答案: