css - Rectangle with two cut edges -

i'm not sure specific name shape can called "half parallelogram" ? want make shape purely using css/css3. help? or tutorial?

you can using pseudo-elements below. approach cut out triangle shape left-bottom , top-right of box. method can used either solid color image inside shape long body background solid color. when body background non-solid color approach not work because border hack needs solid color background.

the advantage of method can support cuts of different angles @ each side (like in question hypotenuse of triangular cut on either side not parallel each other).

div {    background: red;    width: 200px;    height: 100px;    position: relative;  }  div:before {    position: absolute;    height: 0;    width: 0;    content: ' ';    border: 20px solid white;    border-color: transparent transparent white white;    border-width: 20px 0px 0px 15px;    left: 0;    top: 80px;  }  div:after {    position: absolute;    height: 0;    width: 0;    content: ' ';    border: 20px solid white;    border-color: white white transparent transparent;    left: 170px;    top: 0px;  }  .with-img {    background: url(http://lorempixel.com/100/100);  }

<div></div>  <br>  <div class="with-img"></div>

---

sample 2: can achieve similar effect using gradients. 1 gradient enough produce cut of similar angle on both sides. if different angles required 2 gradients should used. multiple gradient approach mentioned here not work when body background non-solid color.

div {    width: 200px;    height: 100px;    position: relative;  }  .with-single-gradient {    background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);  }  .with-single-gradient.image {    background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);  }  .with-multiple-gradient.image {    background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);  }

<div class='with-single-gradient'></div>  <br>  <div class='with-single-gradient image'></div>  <br>  <div class='with-multiple-gradient image'></div>

---

sample 3: can created using svg , best method yet. requires single path element creates required shape.

<svg viewbox='0 0 100 60' width='200px' height='120px'>    <path d='m0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />  </svg>

tested on chrome v24, firefox v19, safari v5.1.7 (on windows) , ie v10. older versions should work in latest versions also.

note: ie versions less 10 not support gradients mentioned in this thread.