如何在html5 css3中创建角度div

Question

如图所示，我在创建对角div时需要帮助。 我使用对角线设计，使用绝对定位和z-index在右上和左下三角形。 并且该div将是其中包含内容的主要div。 我需要使div类似于图片。 我尝试使用transform歪斜属性，但这无济于事。 任何帮助将是可观的。 股利将有这样的事情

<div class="tr-corner"><img src="tr.png"></div>
<div class="main">
<div class="content">
Blah blah blah
</div>
</div>
<div class="bl-corner"><img src="bl.png"></div>

的CSS

.tr-corner{
position:absolute;
top:0;
right:0;
z-index: 1;
}
.bl-corner{
position:absolute;
bottom:0;
left:0;
z-index: 3;
}

现在，我需要创建ID为“ main”的div，使其对角线如下所示。

Answer 1

您可以使用skew()来实现

div {
    height: 200px;
    border: 2px solid #aaa;
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    transform: skew(20deg,0);
}

演示版

---

确保还添加了专有属性，以确保旧版本的浏览器不会渲染。

div {
    height: 200px;
    border: 2px solid #aaa;
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    -webkit-transform: skew(20deg,0);
    -moz-transform: skew(20deg,0);
    transform: skew(20deg,0);
}

演示2 （添加了专有属性。.特别是对于chrome用户）

---

浏览器兼容性非常好。

^{鸣谢： Mozilla开发人员网络}

Answer 2

您需要使用css3的偏斜：

div {
  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
  transform: skew(30deg,20deg);
   }

不要忘记用颜色填充div :)