如何在html5 css3中创建角度div

Question

I need help in creating diagonal div as shown in the picture. i have diagonal design with triangles at top right and bottom left with using absolute positioning and z-index. And this div will be the main div having content in it. I need to make a div similar to the picture. i tried using transform skew property but that does not help. Any help will be appreciable. The div will have something like this

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

Now i need to create the div with id "main" to be diagonal as shown below.

Answer 1

You can use skew() to achieve that

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

Demo

---

Make sure you add proprietary properties as well, so that old browser versions don't fail to render.

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

Demo 2 (Added proprietary properties.. especially for chrome users)

---

Browser compatibility is pretty sweet..

^{Credits : Mozilla Developer Network}

Answer 2

You need to use css3's skew:

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

dont forget to fill in the div with colors :)