如何在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 :)