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- ...
随机推荐
- css3 实现运动动画 圆与椭圆
圆: html <div class="demo4"><div></div></div> css .demo4{ width: 20 ...
- textarea的style="resize:none;"
<textarea class="form-control" id="gryj" rows="3" maxlength="3 ...
- Umbraco examine search media folder 中的pdf文件
可以参考的文章 http://sleslie.me/2015/selecting-media-using-razor-slow-performance-examine-to-the-rescue/ h ...
- php封装pdo操作数据的工具类
<?php header("Content-Type:text/html;charset=utf-8"); class PdoMysql{ public static $co ...
- 使用Postman测试请求
Postman是什么 在开发或者调试网络程序或者是网页B/S模式的程序的时候,需要一些方法来跟踪网页请求,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具. 网页调试工具Postm ...
- MFC——4个基本类中的成员函数介绍
09121852 杜军 机械设计及理论 1. CMainFrame ActivateFrame使框架对用户可视并可用 CalcWindowRect每当主框架窗口的客户区尺寸发生变化或控制条的位置发生变 ...
- Open-source Tutorial - Json.NET
JSON 简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种由道格拉斯·克罗克福特构想和设计.轻量级的数据交换语言,该语言以易于让人阅读的文字 ...
- C++开源库(一) ----libConfig详解
博主天生患有蛋疼疾病,写博不易,转载注明出处http://www.cnblogs.com/liboBlog/,谢谢! 在写程序的时候必不可少的一个部分就是conf文件的解析,但是如果自己解析的话会比较 ...
- mysql由浅入深探究(四)----mysql事务详解
什么是事务: 通俗的解释就是对数据库进行的一组完整的操作,这组完整的操作中包含一个或多个操作.解释的太low了,来点官方的:事务就是DBMS中执行的一个完整的逻辑单元,这个逻辑单元中包含一个或者多个操 ...
- 容易忘记的css属性和动画属性
动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...