html - 如何制作三 Angular 形阴影？

Question

我正在尝试这样做

主要想法是在这个包含图像和文本的 div 中制作旋转木马。

.background {
  height: 657px;
  /* background-color: red; */
  background-image: linear-gradient(135deg, #D4B8CE 5%, #DEC2D8 100%);
}

.background:before {
  content: '';
  width: 100%;
  height: .3%;
  bottom: 20%;
  position: absolute;
  background-image: linear-gradient(to right, #B59AB0 5%, #CBB2C7 100%);
}

.background:after {
  z-index: 9;
  content: '';
  background-image: linear-gradient(45deg, #D9BDD4 5%, #EBCFE5 100%);
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 0;
}

.listdiv {
  z-index: 10;
  position: absolute;
  height: 80%;
  bottom: 12%;
  left: 40%;
  width: 25%;
  background-color: white;
  background-image: url(https://i.pinimg.com/originals/93/34/c7/9334c7e1fb00a2b49b8c1d4504ec0a45.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 6px 12px -6px #00000066;
}

.listdiv::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 404.8px 50px 44px 0;
  border-color: transparent #9191913d transparent transparent;
  line-height: 0px;
  left: -15.5%;
  filter: saturate(52);
  filter: drop-shadow(-5px 4px 17px black)blur(8px);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="background w-100 bg-red">
  <div class="listdiv">
  </div>
</div>

我怎样才能实现像上图这样的阴影？

请以整页模式运行代码片段以查看问题。

Answer 1

您可以使用伪元素、渐变和一些过滤器对此进行近似。

尝试不同的值，直到你得到你想要的:

body {
  background:pink;
  margin:0;
  padding-bottom:100px;
}
.container {
  padding:20px;
  background:#e4a8b3;
  position:relative;
  z-index:-1;
}

.box {
  background:white;
  width:200px;
  height:300px;
  margin:0 auto -50px;
  border:1px solid grey;
  position:relative;
}
/* Relevant code start here */ 
.box:before,
.box:after {
  content:"";
  position:absolute;
  z-index:-1;
  right:98%;
  width:70px;
  filter:blur(4px);
}

.box:before {
  bottom:30px;
  top:0;
  background:
    linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%) 
    bottom / 100% 115%;
}
.box:after {
  height:32px;
  bottom:0;
  background:
     linear-gradient(to top   right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
     top / 100% 115%;
}
/**/

<div class="container">
<div class="box"></div>
</div>

您可以优化代码以仅使用一个伪元素:

body {
  background:pink;
  margin:0;
  padding-bottom:100px;
}
.container {
  padding:20px;
  background:#e4a8b3;
  position:relative;
  z-index:-1;
}

.box {
  background:white;
  width:200px;
  height:300px;
  margin:0 auto -50px;
  border:1px solid grey;
  position:relative;
}
/* Relevant code start here */ 
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  right:98%;
  width:70px;
  top:0;
  bottom:0;
  filter:blur(4px);
  background:
    linear-gradient(to top   right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
     bottom -10px center / 100% calc(30px + 10px),
    linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%) 
     top    -20px center / 100% calc(100% - 30px + 20px);
   background-repeat:no-repeat;
}

/**/

<div class="container">
<div class="box"></div>
</div>