如何在CSS中绘制对角线div？谷歌只揭示了如何绘制对角线“线条”，但我无法理解如何为div制作它。
在下图中，蓝色部分是div：
你可以使用CSS3 transform 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);
}
来自spec：
skewY()指定沿Y轴按给定角度进行的2D倾斜变换。
值得注意的是，使用skewY()不会改变转换元素的宽度。
还要注意子选择器。最好使用直接child selector .parent > .child而不是descendant selector来否定对子元素的转换。
使用 ：
transform: rotate(45deg);
只需为所有浏览器添加前缀（-webKit，-moz，...）
真的很酷的代码使用background-image：https://codepen.io/PositionRelativ/pen/Ichrg
.one{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
min-height: 500px;
}
我使用了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>