Question

如何在CSS中绘制对角线div？谷歌只揭示了如何绘制对角线“线条”，但我无法理解如何为div制作它。

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

enter image description here

Answer 1

您可以使用CSS3 transform skewY()函数为 parent 添加正值，为 child 包装元素使用负值来实现效果。

.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);
}

<强> WORKING DEMO

来自spec：

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

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

介意子选择器。最好使用直接child selector .parent > .child而不是descendant selector来否定子元素的转换。

Answer 2

使用：

transform: rotate(45deg);

只需为所有浏览器添加前缀（-webKit，-moz，...）

Answer 3

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

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

Answer 4

我已经使用clip-path获得相同的结果。这是我的代码

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>

如何绘制对角线div？

4 个答案: