Html 如何绘制对角线 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22352311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I draw a Diagonal div?
提问by uSeRnAmEhAhAhAhAhA
How do I draw a diagonal divin CSS? Google only reveals how to draw diagonal "lines", but I could not understand how to make that for div's.
如何div在 CSS 中绘制对角线？谷歌只揭示了如何绘制对角线“线”，但我无法理解如何为div's制作它。
In the pic below, the blue part is the div:
在下图中，蓝色部分是div：
回答by Hashem Qolami
You could use CSS3 transformskewY()function with positive value for the parentand negative value for the childwrapper element to achieve the effect.
您可以使用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);
}
工作演示。
From the spec:
从规范：
skewY()specifies a 2D skew transformation along the Y axis by the given angle.
skewY()按给定角度指定沿 Y 轴的 2D 倾斜变换。
It's worth noting that the using skewY()won't change the width of the transformed elements.
值得注意的是 usingskewY()不会改变转换元素的宽度。
Also mindthe childselector. It's better to use direct child selector.parent > .childrather than descendant selectorto negate the transform on the childelement.
回答by nikitz
Use :
用 ：
transform: rotate(45deg);
Just add prefixes for all browsers (-webKit, -moz, ... )
只需为所有浏览器添加前缀 (-webKit, -moz, ... )
回答by Pushkal Singh
I have used clip-path to get the same result. here is my code
我已经使用剪辑路径来获得相同的结果。这是我的代码
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>回答by Albuquerque Web Design
Really cool codes using background-image: https://codepen.io/PositionRelativ/pen/Ichrg
使用背景图像的非常酷的代码：https: //codepen.io/PositionRelativ/pen/Ichrg
.one{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
min-height: 500px;
}
