CODEWITHSUNDEEP
htmlcssinternet-explorer
Gilbert R.
Gilbert R.

Reputation: 292

CSS clip-path replacement for IE

Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.

This is what I am trying to do: enter image description here

My current code works as you can see in this codepen: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100

The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.

.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; }

Upvotes: 0

Views: 283

Answers (2)

settah abdelkader
settah abdelkader

Reputation: 52

you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg

Upvotes: -1

Ori Drori
Ori Drori

Reputation: 191976

In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.

Demo:

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>

Upvotes: 2

Related Questions