Rectangle with two cut edges

Question

I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?

Answer 1

You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.

The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to 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: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a 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: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the 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) and IE v10. They are older versions but should work in the latest versions also.

Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.