Как использовать эффекты drop-shadow в IE для div с after и befor псевдоэлементами? - PullRequest
Новая
       51

Как использовать эффекты drop-shadow в IE для div с after и befor псевдоэлементами?

0 голосов
/ 18 марта 2020

У меня есть мастер с div с двумя стрелками с этим html

.container {
  padding: 10px 20px;
  display: flex;
}

div.arrow {
  width: 261.5px;
  height: 50px;
  background-color: #d3d3d3;
  position: relative;
  margin-right: 30px;
  text-align: center;
  line-height: 50px;
}

.current {
  filter: drop-shadow(2px 3px 7px grey);
}

div.arrow::after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #d3d3d3;
  border-width: 25px 10px;
  width: 0;
  height: 0;
  left: 100%;
  border-color: transparent transparent transparent #d3d3d3;
}

div.arrow::before {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #d3d3d3;
  border-width: 25px 10px;
  width: 0;
  height: 0;
  left: -20px;
  border-left-color: transparent;
}
<div class="container">
  <div class="arrow">Previous status</div>
  <div class="arrow current">Current status</div>
</div>

У меня есть класс под названием «current», где я применил эффект drop-shadow. Он работает нормально, но IE не поддерживает его, и я не могу найти решение для решения этой проблемы. Любая помощь, чтобы решить эту проблему? Я не могу отредактировать существующий css ...

Здесь кодовое поле: https://codepen.io/andy_888/pen/bGdKxjv

Спасибо

...