.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

css3创建多边形clip属性,可用来绘制不规则图形了的更多相关文章

  1. Canvas绘制不规则图形,实现可拖动,编辑--V1.0第一篇

    目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...

  2. CSS3绘制不规则图形,代码收集

    三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up ...

  3. [ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  4. 使用CSS 3创建不规则图形 文字围绕

    前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...

  5. 使用CSS 3创建不规则图形

    前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...

  6. css3中clip属性

    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...

  7. 将CSS CLIP属性应用在:扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  8. CSS Clip属性

    Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...

  9. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

随机推荐

  1. zk 01之 ZooKeeper概述

    Zookeeper产生的背景 ZooKeeper---译名为“动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的 ...

  2. python find()用法

    案例: ### 1 ### str = "01213456" if str.find("23"): print "YES!" else: p ...

  3. 关于java中equals与==的区别的小实验

    java中equals与==经常容易混淆,简单一点说就是equals比较的是值是否相等,是一种方法,==比较的两个对象在JVM中的地址,是一种操作符. 做了几个小实验比较结果. 实验一: String ...

  4. Selenium实战脚本集—新浪微博发送QQ每日焦点

    Selenium实战脚本集-新浪微博发送QQ每日焦点 http://www.spasvo.com/ceshi/open/kygncsgj/Selenium/201549150822.html 背景 很 ...

  5. Django 的 之 视图

    Django的View(视图) 一个视图函数(类),简称视图, 是个简单的python函数(类),它接受wed请求并且返回web 响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  6. Consuming JSON Strings in SQL Server

    https://www.simple-talk.com/sql/t-sql-programming/consuming-json-strings-in-sql-server/ Consuming JS ...

  7. DSOFramer控件使用注意事项

    1.引用dll==>AxInterop.DSOFramer.dll ==>Interop.DSOFramer.dll ==>WindowsFormsIntegration ==> ...

  8. MS SQL Server的LTRIM,RTRIM和TRIM函数

    在MS SQL Server 2017有了一个新函数TRIM,整合以前版本LTRIM和RTRIM. 这几个函数都是去除字符串头部后尾部的空格. DECLARE @str NVARCHAR(MAX) = ...

  9. 数据库路由中间件MyCat - 源代码篇(14)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 对于表的dataNode对应关系,有个特殊配置即类似dataNode="distributed(d ...

  10. 数据库路由中间件MyCat - 源代码篇(8)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3. 连接模块 3.5 后端连接 对于后端连接,我们只关心MySQL的. 从后端连接工厂开始MySQLCon ...