CSS-путь замены клипа для IE

Question

Кто-нибудь знает свойство CSS, которое я могу использовать для достижения того же результата, что и clip-path для создания округлых фигур вокруг div?Мой сайт должен быть совместим с последней версией IE, но я проверил на www.caniuse.com, и в IE 11 не поддерживается clip-path.

Вот что я пытаюсь сделать:

Мой текущий код работает, как вы можете видеть в этом коде: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100

Проблема в том, что этот код не будет работать в IE, как можноЯ решаю это?Конечно, должно быть другое свойство CSS, которое делает то же самое.

.card {
  width: 80%;
  height: 16.5rem;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  padding: 0 1.5rem; 
  margin:10rem auto;
}

  .card__inner-wrapper {
    height: 55%;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
  .card__img {
    height: 100%;
    position: absolute;
    bottom: 50%;
    clip-path: circle(50% at 50% 50%);
    background-color: #fff;
    border: 0.8rem solid #fff; }
  .card__text-content {
    position: absolute;
    top: 6rem; }
  .card__heading {
    font-size: 1.8rem;
    font-weight: 500;
    color: #5fc0c3;
    margin-bottom: 1.5rem; }

Answer 1

Вы можете использовать встроенный SVG для обрезки изображения, поскольку он имеет отличную поддержку браузера - http://caniuse.com/#search=inline%20svg

Answer 2

В этом случае border-radius: 50%; на .card__img даст вам тот же результат, и он совместим с IE9 и выше.

Демонстрация:

body {
  background-color: gray;
}

.card {
  width: 80%;
  height: 16.5rem;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  padding: 0 1.5rem;
  margin: 10rem auto;
}

.card__inner-wrapper {
  height: 55%;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.card__img {
  height: 100%;
  position: absolute;
  bottom: 50%;
  border-radius: 50%; /* instead of clip-path */
  background-color: #fff;
  border: 0.8rem solid #fff;
}

.card__text-content {
  position: absolute;
  top: 6rem;
}

.card__heading {
  font-size: 1.8rem;
  font-weight: 500;
  color: #5fc0c3;
  margin-bottom: 1.5rem;
}

<div class="card">
  <div class="card__inner-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
    <div class="card__text-content">
      <h4 class="card__heading">We help charities</h4>
      <p>Share knowledge and working practice to make the best technology choices.</p>
    </div>
  </div>
</div>