英文:
Simpler way to achieve a 3D box-shadow effect
问题
我有一个带有阴影效果的CSS拱门。是否有CSS的特性可以减少box-shadow的行数?
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>
英文:
I have a CSS arch with a box-shadow, achieving a 3D effect. Is there a feature of CSS that would reduce the number of lines for box-shadow?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<div class="arch"></div>
<!-- end snippet -->
答案1
得分: 1
这是一个使用 box-shadow
和 clip-path
的想法。请注意,第一个阴影的扩展不是0。
.arch {
background: 橙色;
边框半径: 50% 50% 0px 0px;
宽度: 270px;
高度: 300px;
间距: 50px;
阴影:
-15px 15px 0px 5px #222, /* 扩展等于5px */
0 20px 0px #222; /* 20px = 15px + 5px */
裁剪路径: polygon(-20px 0,100% 0,100% 100%,calc(100% - 20px) calc(100% + 20px),-20px calc(100% + 20px))
}
<div class="arch"></div>
英文:
Here is an idea using box-shadow
and clip-path
. Notice that the first shadow is using a spread different from 0
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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))
}
<!-- language: lang-html -->
<div class="arch"></div>
<!-- end snippet -->
答案2
得分: 0
你可以使用伪类来实现类似的效果:
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;
}
如果你愿意使用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>
英文:
You could use pseudo classes to achieve a similar effect:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<div class="arch"></div>
<!-- end snippet -->
If you are okay with using SVG, you could use an SVG too:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论