首页 > 其他 > 详细

clip-path的妙用

时间:2016-11-16 13:39:13      阅读:109      评论:0      收藏:0      [点我收藏+]

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的妙用

原文:http://www.cnblogs.com/Amcc/p/6068785.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!