创建一个"动态高度"的框

Question

我正在寻找一种方法来创建一个看起来像这个图形的CSS的div:

右下方不是白色而是透明的.

怎么可能呢？

Answer 1

方法#01:

使用转换的伪元素ie :before或: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>

方法#02:

使用css3 linear-gradient.

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

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

<div></div>