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

Question

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

有人可以帮我吗？

Answer 1

您可以使用伪元素（例如::before或::after来创建具有transform css属性的倾斜图层，并使用linear-gradient()绘制背景图像。

.shape {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index:0;
  margin: 0 auto;
  color: #fff;
  display: flex;
  height: 80vh;
  width: 80vh;
}

.shape::before {
  background: linear-gradient(to top right, maroon 50%, red 50%);
  transform: skewX(-20deg);
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

<div class="shape">Content Goes Here...</div>

参考：

• linear-gradient()
• Pseudo Elements
• Skew Transformation

Answer 2

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>