Internet Explorer/Edge 的剪辑路径替代方案

Question

我有一个项目使用剪辑路径在整个设计中呈现倾斜。项目范围发生了变化，我现在需要支持不支持剪辑路径的 IE/Edge。

有一个常见的重复设计元素，其中剪辑路径应用于图像/文本组件包装器，并剪辑右下角（您可以在下面的 sn-p 中看到这一点）。

我不确定如何通过其他方式执行此操作，以便它可以在 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>