0

I am trying to set css shadow for top part and also for left and right but with reduced height. I am familiar with blur/radius, but I want the shadow be really short. picture from wix template (cant upload yet, I am sorry)

Can somebody please help me? The last chance I see, I will probably use border-image but I want to avoide it, if possible. Thanks for every suggestion

vlciak
  • 127
  • 1
  • 1
  • 8

1 Answers1

0

One posibility, using a pseudo rotated with perspective and dimensioned to only half the height:

.test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
}

.test:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  height: 50%;
  left: 0px;
  box-shadow: 0px 0px 15px 2px black;
  transform: perspective(400px) rotateX(-10deg);
  transform-origin: center top;
  z-index: -1;
}
<div class="test"></div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • Thanks really for it, but the shadow wasnt showing to me. So I did some research and if everyone find this thread useful, please refer also to this link, where is really important z-index of parent element also. Anyway thumbs up vals! http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible – vlciak Feb 29 '16 at 14:39