实现3D框影效果的简单方法

Question

我有一个带框阴影的CSS拱门，达到3D效果。有没有CSS的特性可以减少框影的行数?

html {
padding: 40px;
}
.arch {
transition: all 250ms ease-in 0s;
background: orange;
border-radius: 50% 50% 0px 0px;
width: 270px;
height: 350px;
position: relative;
box-shadow: -1px 1px 0px #222,
-2px 2px 0px #222,
-3px 3px 0px #222,
-4px 4px 0px #222,
-5px 5px 0px #222,
-6px 6px 0px #222,
-7px 7px 0px #222,
-8px 8px 0px #222,
-9px 9px 0px #222,
-10px 10px 0px #222,
-11px 11px 0px #222,
-12px 12px 0px #222,
-13px 13px 0px #222,
-14px 14px 0px #222,
-15px 15px 0px #222,
-16px 16px 0px #222,
-17px 17px 0px #222,
-18px 18px 0px #222,
-19px 19px 0px #222,
-20px 20px 0px #222;
}

<div class="arch"></div>

Answer 1

这是一个使用box-shadow和clip-path的想法。注意，第一个阴影使用了不同于0

的扩展

.arch {
background: orange;
border-radius: 50% 50% 0px 0px;
width: 270px;
height: 300px;
margin: 50px;
box-shadow: 
-15px 15px 0px 5px #222, /* a spread equal to 5px */
0   20px 0px #222; /* 20px = 15px + 5px */
clip-path: polygon(-20px 0,100% 0,100% 100%,calc(100% - 20px) calc(100% + 20px),-20px calc(100% + 20px))
}

<div class="arch"></div>

Answer 2

您可以使用伪类来实现类似的效果:

html {
padding: 40px;
}
.arch {
background: orange;
border-radius: 50% 50% 0px 0px;
width: 270px;
height: 350px;
position: relative;
}
.arch::before{
content: " ";
width: 100%;
height: 20px;
background-color: red;
position: absolute;
bottom: -20px;
right: 10px;
transform: skew(-45deg, 0deg);
}
.arch::after{
content: " ";
width: 100%;
height: 100%;
background-color: green;
position: absolute;
border-radius: 50% 50% 0px 0px;
left: -20px;
bottom: -20px;
z-index: -1;
}

<div class="arch"></div>

如果你可以使用SVG，你也可以使用SVG:

<svg width="290" height="370">
<circle cx="135" cy="155" r="135" fill="green" />
<rect x="0" y="155" width="270" height="215" fill="green"/>
<polygon points="0,370 270,370 290,350 20,350" fill="red" />
<circle cx="155" cy="135" r="135" fill="orange" />
<rect x="20" y="135" width="270" height="215" fill="orange"/>
</svg>