使用顶部三角形和阴影进行划分

Question

我需要使用html和css制作相同的图像外观，如下所示：

Answer 1

尝试这样的事情：

＆＃13;

＆＃13;

#trapezoid {
  border-bottom: 60px solid red;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  height: 0;
  width: 320px;
}

#triangle-up {
  width: 0; height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 50px solid red;
}

＆＃13;

<div id="triangle-up"></div>
<div id="trapezoid"></div>

＆＃13;

＆＃13;

＆＃13;