Internet Explorer/Edge的剪辑路径替代 [英] clip-path alternatives for Internet Explorer/Edge

问题描述

我有一个项目，该项目使用剪切路径在整个设计中呈现倾斜.该项目的范围已更改，我现在需要支持不支持剪切路径的IE/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).

我不确定如何通过其他方式执行此操作，以便它可以在IE/Edge中运行.还有另一种方法可以使我不必导出已经应用了倾斜的图像吗?

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>

推荐答案

一种受支持但不会使修剪的部分透明的简单方法是在上面添加具有相同形状的覆盖层，并使颜色与背景.

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>

另一个具有透明度的想法是考虑偏斜转换，但是您必须稍微调整HTML:

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>

这篇关于Internet Explorer/Edge的剪辑路径替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！