做一個分工與頂部的三角形形狀和陰影

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>