javascript - 使用可在 IE 中使用的 CSS 或 SVG 创建多边形形状

Question

我正在尝试与此类似的布局 -

我已经成功地使用 css Clip-path:polygon - JS fiddle here - https://jsfiddle.net/79c6fsg4/1/ 轻松做到了这一点。然而，这需要在 IE 和 Firefox 中工作，而 Clip-path 在它们中不起作用，而且没有任何像样的 Polyfills 在 IE 中工作。我知道我也可以使用 SVG 来实现此目的，但因为多边形 div 内的内容可能会使其更高或更短，并且颜色渐变可能会根据用户选择的内容而变化，这意味着它可能不是正确的解决方案。

我什至尝试过在 div 上使用伪元素三 Angular 形，将其绝对放置在最远的边缘，但这甚至不起作用。

还有其他人有我忽略的其他想法吗？

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

您可以尝试 :after 元素并应用 skew 转换，如下所示:

.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%);
}

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

要获得另一个方向的形状，只需将倾斜值从 10deg 更改为 -10deg