Question

enter image description here我是初学者，正在寻求帮助。我想对角分割网页。我可以仅使用HTML和CSS吗？请给我一些建议。

Answer 1

您可以使用CSS剪辑路径属性。

在您使用时，我将使用：

clip-path: polygon();

属性。此属性允许您定义元素中向后拉的角度。在这种情况下，我使用了两个div并将它们受尊重的角向后拉，使它们看起来对角。

使用

calc();

在我的CSS中，我可以使用百分比和vh（视口高度）来计算最终值，并且可以做到这一点，以便不同的屏幕宽高比不会影响对角线的偏斜度。

当使用clip-path时，它会从div元素中切出一部分。这意味着文字将被截断。为了解决这个问题，我在受尊重的div的左侧和右侧添加了一个填充，以将内容压入其中。

此外，元素的边距仍为矩形。因此，您要切块，但这会在元素之间创建对角线间隙。因此，为了将这些元素放在一起，我扣除了边距。

最后，剪切路径也剪切出边框。因此，要创建橙色线，我使用了包装器div并设置了其背景色。我还将边距保持足够小，以使两个div元素之间保持一定的间距。

在代码段中，我可能不小心将对角线分割错了方向...哎呀，好！只需在clip-path属性中将值更改为其他值即可。：）

看看。

body{
		margin: 0;
		font-size: 2em;
	}

	#landing-area{
		width: 100vw;
		height: 100vh;
		display: flex;
		background-color: #F46835;
	}

	#box-left{
		width: 50%;
		clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
		margin-right: -4.2vh;
		padding: 5px 11vh 5px 5px;
		background-color: #F4FCFF;
		text-align: center;
	}
	#box-right{
		width: 50%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
		margin-left: -4.2vh;
		padding: 5px 5px 5px 11vh;
		background-color: #44325A;
		text-align: center;
	}

<body>
	<div id="landing-area">
		<div id="box-left">
			Box 1!
		</div>
		<div id="box-right">
			Box 2!
		</div>
	</div>
</body>

对角分割网页

1 个答案: