不可思议的clip-path丨技术开发分享录

不可思议的clip-path

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"clip-path主要用来裁剪形状,常用来处理不规则展示\n\nclip-path MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path\nclip-path在线生成:https://www.html.cn/tool/css-clip-path/\n\ncss属性样式都比较简单粗暴,这里不再赘述语法,如果想看语法的话,直接到MDN文档里看就行了,下面列举些示例,扩展下视野,以便后期可能会用到\n\n## 一、三角形\n\n<style type=\"text/css\">\n  .zh-box {\n    width: 150px;\n    height: 150px;\n    margin-top: 15px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n  }\n</style>\n<div class=\"zh-box\"></div>\n\n```html\n<style type=\"text/css\">\n  .zh-box {\n    width: 150px;\n    height: 150px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n  }\n</style>\n<div class=\"zh-box\"></div>\n```\n\n## 二、菱形\n\n<style type=\"text/css\">\n  .zh-box-2 {\n    width: 150px;\n    height: 150px;\n    margin-top: 15px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n  }\n</style>\n<div class=\"zh-box-2\"></div>\n\nclip-path对应如下:\n\n```css\nclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n```\n\n## 三、对话气泡\n\n<style type=\"text/css\">\n  .zh-box-3 {\n    width: 150px;\n    height: 150px;\n    margin-top: 15px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);\n  }\n</style>\n<div class=\"zh-box-3\"></div>\n\nclip-path对应如下:\n\n```css\nclip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);\n```\n\n## 四、星形\n\n<style type=\"text/css\">\n  .zh-box-4 {\n    width: 150px;\n    height: 150px;\n    margin-top: 15px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n  }\n</style>\n<div class=\"zh-box-4\"></div>\n\nclip-path对应如下:\n\n```css\nclip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n```\n\n## 五、箭头\n\n<style type=\"text/css\">\n  .zh-box-5 {\n    width: 150px;\n    height: 150px;\n    margin-top: 15px;\n    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;\n    background-size: 200% auto;\n    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);\n  }\n</style>\n<div class=\"zh-box-5\"></div>\n\nclip-path对应如下:\n\n```css\nclip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);\n```\n\n先就这5种吧,其他的都不列举了,直接到上面**在线生成**里审查元素,copy对应的clip-path属性即可,没有的话就需要自己实现了。"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看