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%);}

 

clip-path的各个点连起来的内容，就是会展示在我们面前的内容

 

这样我们就获取到了红色线连起来的部分的内容了，实现DIV的切割！

 

和原图简直一毛一样！没有一点点的差别啊！嘻嘻