怎么画对角线呢？

Question

如何在CSS中绘制对角线div？谷歌只透露如何绘制对角线“线”，但我不知道如何为div的。

在下面的图中，蓝色部分是div

​

​

Answer 1

您可以使用具有父元素正值和子包装元素负值的CSS3变换 skewY()函数来实现此效果。

.parent {
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}

.parent > .child {
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

工作演示。

来自等级库

skewY()通过给定的角度指定沿Y轴的2D斜交变换。

值得注意的是，使用skewY()不会更改转换元素的宽度。

还有mind，孩子选择器。最好使用直接子选择器 .parent > .child而不是后代选择器来否定子元素的转换。

Answer 2

非常酷的代码使用背景图像：https://codepen.io/PositionRelativ/pen/Ichrg

 .one{
   background-color: #013A6B;
   background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
   min-height: 500px;
 }

Answer 3

我用剪辑路径得到了同样的结果。这是我的密码

​

body
{
	margin: 0;
	padding: 0;
}
.polygon
{
	height: 100vh;
	background: #00A2E8;
	clip-path: polygon(0 50%, 100% 0,100% 50%,0 100%);
	position: relative;
}
.content
{
	position: absolute;
	top: 50%;
	left: 20%;
}

<html>
	<head>
		<title>Clippath</title>
		<link rel="stylesheet" type="text/css" href="clip.css">
	</head>
	<body>
		<div class="polygon">
			<div class="content">
			<h2 class="head">heading</h2>
			<p>lorem ipsum dolar sit amet lol</p>
			</div>
		
		</div>
	</body>
</html>

​