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
css3创建多边形clip属性,可用来绘制不规则图形了的更多相关文章
- Canvas绘制不规则图形,实现可拖动,编辑--V1.0第一篇
目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...
- CSS3绘制不规则图形,代码收集
三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up ...
- [ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- 使用CSS 3创建不规则图形 文字围绕
前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...
- 使用CSS 3创建不规则图形
前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...
- css3中clip属性
clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...
- 将CSS CLIP属性应用在:扩展覆盖效果
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...
- CSS Clip属性
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
随机推荐
- poj3067Japan——树状数组查找逆序对
题目:http://poj.org/problem?id=3067 利用树状数组查找逆序对. 代码如下: #include<iostream> #include<cstdio> ...
- 分布式一致性协议之:Paxos算法(转)
Paxos算法的难理解与算法的知名度一样令人敬仰,从我个人的经历而言,难理解的原因并不是该算法高深到大家智商不够,而在于Lamport在表达该算法时过于晦涩且缺乏一个完整的应用场景.如果大师能换种思路 ...
- [cf2015ICLFinalsDiv1J]Ceizenpok’s formula
题意:$C_n^m\% k$ 解题关键:扩展lucas+中国剩余定理裸题 #include<algorithm> #include<iostream> #include< ...
- css3中变形处理
transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
- 【机器学习】文本分类——朴素贝叶斯Bayes
朴素贝叶斯主要用于文本分类.文本分类常见三大算法:KNN.朴素贝叶斯.支持向量机SVM. 一.贝叶斯定理 贝叶斯公式思想:利用已知值来估计未知概率.已知某条件概率,如何得到两个事件交换后的概率,也就是 ...
- Windows下git的安装与配置
表示git安装成功.
- 基于Laravel框架的一个简单易学的微信商城(新手必学)
俗话说,麻雀虽小可五脏俱全呀! 今天分享的这个基于Laravel的小项目大概功能有这些: 1.实现会员登录.注册功能.数据双向验证功能.2.实现手机短信验证.邮件激活账号.邮件通知.3.ajax提交数 ...
- windows如何定时关闭一个程序
方法一其实系统本身有这项功能的,打开记事本,将以下内容保存为.bat文件(将下面cmd.exe的名字改成你的音乐播放软件的exe名)@echo offTASKKILL /F /IM cmd.exe / ...
- sqlserver2012——EXCEPT差查询
代表第一个select查询结果与第二个select查询结果去除相交后的数据
- 微信公众号授权登录,提示“redirect_uri 参数错误”
做微信公众号开发授权登录的时候遇到的坑... 后台服务用node,index.js相关代码如下: const oauth = new OAuth(conf.appid, conf.appsecret) ...