css - "Chevron"- 对图像和框的类似效果

Question

我试图为应该看起来像这样的图像创建一个人字形的面具，有点像:https://jsfiddle.net/w0rtLz2h/2/

.clip {
  position: relative;
}

.clip img {
  width: 100%;
}

.clip:before,
.clip:after {
  content: " ";
  display: block;
  width: 50%;
  height: 15%;
  position: absolute;
  bottom: 4px;
}

.clip:before {
  background: -webkit-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: -moz-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: -o-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: linear-gradient(to bottom left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  left: 0;
}

.clip:after {
  background: -webkit-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: -moz-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: -o-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
  right: 0;
}

<div class="clip">
  <img src="http://hotelislandstargroups.com/wp-content/uploads/2014/04/img4-960x420.jpg" />
</div>

我必须让它适用于所有现代浏览器 + IE 9、10、11 ...

我已经尝试使用 CSS 三 Angular 形(通过边框而不是渐变)，但问题是您不能应用 50% 的宽度。

另一种尝试是使用 SVG clipPath 来实现:https://jsfiddle.net/ofnrhq2e/

<svg style="display: block;" viewBox="0 0 960 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
  <g>
    <clipPath id="svg-mask-header">
      <polygon points="0 380,480 500,960 380,960 0,0 0" />
    </clipPath>
  </g> 
  <image clip-path="url(#svg-mask-header)" height="100%" width="100%" xlink:href="http://nfornour.com/wp-content/uploads/2015/11/960x500-beirut-3.jpg" />
</svg>

对于那个，IE 不适应图像的高度，而是适应宽度，所以它变形了。

Answer 1

尝试使用这个使用 SVG 数据 uri 背景图像的版本......应该 gzip 很好:[编辑 2018-01 小型 css 修复]

.clip {
  position: relative;
}

.clip img {
  width: 100%;
  display: block; /* fix gap below */n;
}

.clip:before,
.clip:after {
  content: "";
  display: block;
  width: 50%;
  height: 15%;
  position: absolute;
  bottom: -1px; /* hack to prevent rounding error bleed */
  background-size: 100% auto;
}

.clip:before {
  left: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='m0 0v2h2z' /%3E%3C/svg%3E");
}

.clip:after {
  right: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='m1 0v2h-2z' /%3E%3C/svg%3E");
}

<div class="clip">
  <img src="http://placehold.it/960x220" />
</div>