html - 用 "dynamic height"创建一个盒子

Question

我正在寻找一种使用 CSS 创建 div 的方法，如下图所示:

右边的底部不是白色而是透明的。

这怎么可能？

Answer 1

方法#01:

使用转换后的伪元素，即 :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>