zoukankan      html  css  js  c++  java
  • css3创建多边形clip属性,可用来绘制不规则图形了

    .path1 {
        clip-path: polygon(5px 10px, 16px 3px, 16px 17px);
    }
    .path2 {
        clip-path: polygon(3px 5px, 17px 5px, 10px 16px);
    }
    .path3 {
        clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px 10px, 26px 17px, 26px 10px, 16px 10px, 16px 17px);
    }
    .path4 {
        clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 36px 10px, 36px 3px, 47px 10px, 36px 17px, 36px 10px, 16px 10px, 16px 17px);
    }
    .path5 {
        clip-path: polygon(5px 10px, 16px 3px, 16px 9px, 36px 9px, 36px 3px, 47px 10px, 36px 17px, 36px 10px, 16px 10px, 16px 17px);
    }
    .path6 {
        clip-path: polygon(5px 10px, 16px 3px, 16px 9px, 36px 9px, 36px 3px, 47px 10px, 36px 17px, 36px 11px, 16px 11px, 16px 17px);
    }
    .path7 {
        clip-path: polygon(5px 11px, 5px 9px, 16px 3px, 26px 3px, 40px 9px, 48px 15px, 48px 5px, 40px 11px, 26px 17px, 16px 17px);
    }
    可参考https://www.w3cplus.com/css3/creating-responsive-shapes-with-clip-path.html
    和张鑫旭的文章
    clip-path现在改为了clip
  • 相关阅读:
    开发进度01
    eclipse 调用cmd运行DataX
    kettle 新建DB连接双击打不开
    用户体验评价
    找水王课堂练习
    人月神话阅读笔记01
    用户模板和用户场景
    大道至简阅读笔记03
    第九周
    第八周总结
  • 原文地址:https://www.cnblogs.com/PeggyChan/p/7704858.html
Copyright © 2011-2022 走看看