Question

我试图为像这样的图像创建一个类似于V形图像的V形图像：https://jsfiddle.net/w0rtLz2h/2/

＆＃13;

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

＆＃13;

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

＆＃13;

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

我已经尝试过使用CSS三角形（通过边框而不是渐变），但问题是你无法应用50％的宽度。

另一种尝试是使用SVG clipPath执行此操作：https://jsfiddle.net/ofnrhq2e/

＆＃13;

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

＆＃13;

有了这个，IE不适合图像的height，而是width，所以它会变形。

Answer 1

尝试使用此版本使用SVG数据uri背景图片...应该gzip相当好：[编辑2018-01小css修复]

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃34;雪佛龙＆＃34;对图像和盒子的影响

1 个答案: