首页 > 代码库 > clip-path的妙用
clip-path的妙用
clip-path可以把一个DIV切割
这样就可以完成一些图片的剪辑了，还可以点击图片观看大图，不过主要还是运用在移动端，PC端兼容性不强。
完美！这样我就可以用DIV去画阿童木了！
先来个demo
*{ margin:0; padding:0;}div{ position: relative; width:200px; height:100px; background:#ffbe00; display: inline-block; font-size: 0; /*-webkit-clip-path:polygon(50% 0%, 100% 50%, 50% 100%); -webkit-transition:all .5s;*/ -webkit-clip-path:polygon(0 0, 100% 0,100% 90px,50% 100%,0 90px);}div:after{ content:""; display: inline-block; width:100%; height:20px; position: absolute; bottom:0; left:0; background:red; -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);}
<div></div>
clip-path的各个点连起来的内容，就是会展示在我们面前的内容
这样我们就获取到了红色线连起来的部分的内容了，实现DIV的切割！
和原图简直一毛一样！没有一点点的差别啊！嘻嘻
clip-path的妙用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。