Creating a box with a "dynamic height"

Question

I am looking for a way to create a div with CSS that looks like this graphic:

The bottom on the right is not white but transparent.

How would that be possible?

Answer 1

Method #01:

Use transformed pseudo element i.e :before or :after.

body {
  background: #ccc;
}

div {
  position: relative;
  overflow: hidden;
  height: 100px;
}

div:before {
  transform: rotate(-3deg);
  position: absolute;
  background: brown;
  height: 100%;
  bottom: 40%;
  content: '';
  right: -50px;
  left: -50px;
}

<div></div>

Method #02:

Use css3 linear-gradient.

background: linear-gradient(175deg, brown 60%, transparent 60%);

div {
  background: linear-gradient(175deg, brown 60%, transparent 60%);
  height: 100px;
}

<div></div>