做一个分工与顶部的三角形形状和阴影

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>