使用在IE中工作的CSS或SVG创建多边形形状

Question

我正在尝试布局类似于此 -

我已经设法使用css clip-path很容易做到了：polygon - JS在这里小提琴 - https://jsfiddle.net/79c6fsg4/1/。然而，在IE和Firefox以及剪辑路径中工作的这个需要在它们中不起作用，并且没有任何适当的polyfill在IE中工作。我知道我也可以使用SVG实现这一点，但因为多边形div内的内容可以使它更高或更短，并且颜色渐变可以根据用户选择的内容而改变意味着它可能不是正确的解决方案。

我甚至在div上尝试过伪元素三角形，放在绝对的远边但是甚至不起作用。

有没有其他人有我忽视的其他想法？

FIDDLE - https://jsfiddle.net/79c6fsg4/1/

<div class="holder">
    <div class="shape">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
</div>

.holder {
background-image: url(https://unsplash.it/1002/1000/?random);
background-cover: cover;
width: 500px;
height: 300px;
background-position: 50%;
margin-left: 30px;
position: relative;
}

.shape {
position: absolute;
left: -20px;
bottom: -20px;
width: 200px;
padding: 20px 40px 20px 20px;
clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#1e5799 46%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6
*/}

Answer 1

您可以尝试：在元素之后并应用倾斜转换，如下所示：

＆＃13;

＆＃13;

.holder {
  background-image: url(https://unsplash.it/1002/1000/?random);
  background-cover: cover;
  width: 500px;
  height: 300px;
  background-position: 50%;
  margin-left: 30px;
  position: relative;
}

.shape {
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 200px;
  padding: 20px 40px 20px 20px;
  background: #1e5799; /* Old browsers */
  background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);
}
.shape:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    width: 35px;
    background: #000;
    transform: skew(10deg);
    background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);
}

＆＃13;

<div class="holder">
  <div class="shape">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

要使形状朝另一个方向移动，只需将偏斜值从 10deg 更改为 -10deg

Answer 2

您可以将skew转换应用于.shape

上的伪元素

这似乎适用于Firefox和IE11

fiddle

＆＃13;

＆＃13;

.holder {
  background-image: url(https://unsplash.it/1002/1000/?random);
  background-cover: cover;
  width: 500px;
  height: 300px;
  background-position: 50%;
  margin-left: 30px;
  position: relative;
}

.shape-wrapper {
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 200px;
  padding: 20px 50px 20px 20px;
  overflow: hidden;
}

.shape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -60px;
  left: -20px;
  right: 20px;
  width: 100%;
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-9 */
  -webkit-transform: skew(10deg);
  -moz-transform: skew(10deg);
  -o-transform: skew(10deg);
  transform: skew(10deg);
}

.shape span {
  position: relative;
  z-index: 2;
}

＆＃13;

<div class="holder">
  <div class="shape-wrapper">
    <div class="shape">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
      </span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;