Internet Explorer / Edge

Question

我有一个项目，该项目使用剪切路径在整个设计中渲染倾斜。该项目的范围已更改，我现在需要支持不支持剪切路径的IE / Edge。

有一个常见的重复设计元素，其中将剪切路径应用于图像/文本组件包装，并剪切右下角（您可以在下面的代码段中看到它）。

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

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

Answer 1

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

这是一个线性梯度的想法：

.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：

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