Question 45828 in CSS Question posted in
Some basic documentation can be found here.

Simpler way to achieve a 3D box-shadow effect – CSS

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?

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>
Tags:

2

Answers


  1. 0

    You could use pseudo classes to achieve a similar effect:

    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>

    If you are okay with using SVG, you could use an SVG too:

    <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>
    Login or Signup to reply.
  2. 0

    Here is an idea using box-shadow and clip-path. Notice that the first shadow is using a spread different from 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search