Unwanted shadow border on element with perspective after applying bootstrap

Question

I have a problem after applying bootstrap to an element that uses perspective. I don't want the shadow border around the shadow element. The picture below should clarify what I mean. The one on the right uses bootstrap and has obviously an unwanted visible border around the shadow element.

Here is the corresponding html & css:

HTML

<div class="canvas">
 <span class="shadow"></span>
</div>

CSS

.canvas {
  height: 270px;
  width: 400px;
  border-radius: 50%;
  perspective: 1200px;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 50%);
  transform: rotateX(90deg) translateZ(-100px);
  z-index: -1;
}

JSFiddle to reproduce:

No Boostrap: https://jsfiddle.net/kh84nep2/1/

Bootstrap: https://jsfiddle.net/kh84nep2/3/

---

Why is this happening? And how do I remove the border without removing bootstrap?

Answer 1

Shadow is a class name that already exist in bootstrap:

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

Rename your class to something else. Hopefully something that signals that it is your own class.

<div class="canvas">
 <span class="canvas-shadow"></span>
</div>

And your CSS :

.canvas-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 50%);
  transform: rotateX(90deg) translateZ(-100px);
  z-index: -1;
}