html – 使用CSS3对角切割图像

前端之家收集整理的这篇文章主要介绍了html – 使用CSS3对角切割图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用CSS3对角切割部分图像或容器?

需要切除的部分具有三角形的形状

更具体地说:如果上面的图片是图像,则应该剪切蓝色部分,而不是黄色

HTML应该是:

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

要么:

<div class="container">
  content
</div>

我自己的调查有很多方法可以做到这一点,但大多数都是hacky,所以寻找最好的方法

最低浏览器支持:IE11,最新webkits等

解决方法

像这样使用CSS3 -clip-path和polygon.您可以指定您想要的任何路径.

http://jsfiddle.net/r3p9ph5k/

对于一些额外的位,您可能需要查看例如this.此外,有关IE的更多信息,请参阅this.

原文链接:https://www.f2er.com/html/231810.html

猜你在找的HTML相关文章