CSS3创建多边形clip属性的实例
程序员文章站
2022-04-23 21:27:12
...
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); }
clip-path现在改为了clip
以上就是CSS3创建多边形clip属性的实例的详细内容,更多请关注其它相关文章!
推荐阅读
-
实例讲解CSS3中Transform的perspective属性的用法
-
在css3中background-clip属性与background-origin属性的用法介绍
-
实例讲解CSS3中的border-radius属性
-
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
-
实例讲解CSS3中的box-flex弹性盒属性布局
-
CSS3中的box-sizing属性实例详解
-
实例讲解CSS3中Transform的perspective属性的用法
-
php实现动态创建属性的get和set方法实例详解
-
使用CSS3各个属性实现小人的动画实例代码
-
实例讲解CSS3中的border-radius属性