html - 使用顶部三 Angular 形和阴影进行划分

Question

我需要使用 html 和 css 使图像具有相同的外观，如下所示:

Answer 1

尝试这样的事情:

#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;
}

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