html - 如何在CSS中制作具有阴影效果的平行四边形结构

我想制作一个具有阴影背景色的图形，如下所示：



有人可以帮我吗？

最佳答案

CSS倾斜和渐变可以解决此问题

#demo {
  -moz-transform: skew(-22deg, 0deg);
  -webkit-transform: skew(-22deg, 0deg);
  -o-transform: skew(-22deg, 0deg);
  -ms-transform: skew(-22deg, 0deg);
  transform: skew(-22deg, 0deg);
  editor/#a90329+1,
  a90329+47,
  aa3d48+47,
  aa3d48+100 */ background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#aa3d48', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height: 100px;
}

<div id="demo">Demo</div>