用形状css覆盖图像

时间:2016-06-30 07:56:27

标签: html html5 css3 web

如何使用css形状屏蔽图像?

参考图片

enter image description here

我已经使用css边框样式创建了一个形状,但无法覆盖图像。

CSS

#triangle-topleft {
  width: 0;
  height: 0; 
  border-top: 100px solid red;
  border-right: 100px solid transparent; 
}

2 个答案:

答案 0 :(得分:3)

选项1 - SVG



<svg width="100" height="100">
  <defs>
    <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://lorempixel.com/300/300" x="0" y="0" width="100" height="100" />
    </pattern>
  </defs>
  <polygon points="0,0 100,0 50,100" fill="url(#a)" />
</svg>
&#13;
&#13;
&#13;

在Chrome,Firefox,IE9 +上进行了测试

选项2 - clip-path

&#13;
&#13;
.element {
  display:inline-block;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
&#13;
<div class="element">
  <img src="https://s3.amazonaws.com/uifaces/faces/twitter/ok/128.jpg" />
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

为此你可以使用gradients。这是一个示例代码:

&#13;
&#13;
div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom left, white 50%, transparent 0),        
    url('http://lorempixel.com/100/100');
}
&#13;
<div></div>
&#13;
&#13;
&#13;

<强> Working fiddle