IE的CSS剪切路径替换

Question

有人知道我可以用来实现与clip-path相同的结果以在div周围制作圆形的CSS属性吗？我的网站需要与IE的最新版本兼容，但是我在www.caniuse.com上进行了检查，IE 11不支持clip-path。

这是我想要做的：

我当前的代码可以在此代码笔中看到：https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100

问题是该代码无法在IE中运行，我该如何解决？当然，必须有另一个CSS属性也可以做到这一点。

        modelBuilder.Entity<Team>()
        .HasOptional(t => t.DivisionParticipant)
        .WithRequired(t => t.Team);

Answer 1

在这种情况下，.card__img上的border-radius: 50%;将为您提供相同的结果，并且与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>

Answer 2

您可以使用内嵌SVG来裁剪图像，因为它具有强大的浏览器支持-http://caniuse.com/#search=inline%20svg