clip-path alternatives for Internet Explorer/Edge

问题

I have a project that uses clip-paths to render a slant throughout the design. The scope of the project has changed and I now need to support IE/Edge, which do not support clip-paths.

There is a common repeated design element where the clip-path is applied to an image/text component wrapper, and clips the bottom right corner (you can see this in the snippet below).

I am not certain how to do this via other means so that it will work in IE/Edge. Is there another way of doing this that doesn't involve me having to export the images with the slant already applied?

.image-text-wrapper {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
}
.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}
.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}

<div class="image-text-wrapper">
  <div class="image">
    <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
  </div>
  <div class="text">
    Content is here
  </div>
</div>

回答1:

One easy way that is supported but doesn't make the clipped part transparent is to add an overlay above with the same shape and you make its color the same as the background.

Here is an idea with linear-gradient:

.image-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
  position:relative;
}
.image-text-wrapper::before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:25%;
  background:linear-gradient(to bottom right,transparent 49.5%,#fff 50%);
}
.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}
img {
  display:block;
}
.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}

<div class="image-text-wrapper">
  <div class="image">
    <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
  </div>
  <div class="text">
    Content is here
  </div>
</div>

Another idea with transparency is to consider skew transformation but you have to adjust the HTML slightly:

.wrapper {
  display:inline-block;
  overflow:hidden;
}
.skew {
  display:inline-block;
  transform:skewY(-10deg);
  transform-origin:bottom left;
  overflow:hidden;
}
.skew > * {
  transform:skewY(10deg);
  transform-origin:bottom left;
}

.image-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
}

.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}

img {
  display:block;
}

.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}
body {
  background:pink;
}

<div class="wrapper">
  <div class="skew">
    <div class="image-text-wrapper">
      <div class="image">
        <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
      </div>
      <div class="text">
        Content is here
      </div>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/54279063/clip-path-alternatives-for-internet-explorer-edge

标签

css

internet-explorer

microsoft-edge

clip-path