clip-path
html代码:
<div>
<img src="BC0C62C1B1962A8A.jpg">
</div>
css代码:
img{
clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-webkit-clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-o-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-moz-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-ms-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
ps:这个坐标是从左到右,从上到下的顶点坐标,按照顶点坐标然后连线成一个几何图形
我这个是一个四个顶点,所以是四边形,顶点可以有很多个,按照自己的要求,这个代码就是把这个图片截取成一个菱形,不行你可以试试
我理解的clip-path就是用图片来截取成不规则图片,
哈哈 ,目前理解就这么多
clip-path的更多相关文章
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- 理解Clip Path
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...
- HTML5 Canvas 绘图
首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...
- 转:【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- CSS的clip-path 一
首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自 大漠 的文章 http://www. ...
- .Net资源总结
源码文档见官方群(以下为7.4更新内容) 逆天工具 CDN 资源库 国内 Bootstrap中文网开源项目免费 CDN 服务 360网站卫士常用前端公共库CDN服务 百度静态资源公共库 新浪云计算CD ...
- CSS的clip-path
在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨 ...
- SVG基本图形及clipPath;
利用SVG可以实现很多复杂的图形,SVG的功能开发者们已经开发许多,今天初识一下SVG的基本图形绘制, <svg viewbox="0,0,400,400" style=&q ...
- CSS3/SVG clip-path路径剪裁遮罩属性简介
一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属 ...
- CSS的clip-path(转)
基本概念 clip-path从单词"clip path"的直译上来说,表示的就是裁剪路径.既然有裁剪,咱们就来了解这里面的几个简单的概念. 裁剪就是从某样东西剪切一块.比如说,我们 ...
随机推荐
- python socket 学习
Python在网络通讯方面功能强大,今天学习一下Socket通讯的基本方式,分别是UDP通讯和TCP通讯. UDP通讯 upd 服务端 #!/usr/bin/env python # -*- codi ...
- Web Workers 的基本信息
问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...
- Implementation Model Editor of AVEVA in OpenSceneGraph
Implementation Model Editor of AVEVA in OpenSceneGraph eryar@163.com 摘要Abstract:本文主要对工厂和海工设计软件AVEVA的 ...
- poj 2226 Muddy Fields(合理建图+二分匹配)
/* 题意:用木板盖住泥泞的地方,不能盖住草.木板任意长!可以重叠覆盖! '*'表示泥泞的地方,'.'表示草! 思路: 首先让我们回忆一下HDU 2119 Matrix这一道题,一个矩阵中只有0, 1 ...
- linux安装nginx
nginx启动.重启.关闭 安装: http://www.cnblogs.com/skynet/p/4146083.html 一.启动 cd usr/local/nginx/sbin ./nginx ...
- ZooKeeper官方文档翻译——ZooKeeper Overview 3.4.6
ZooKeeper ZooKeeper: A Distributed Coordination Service for Distributed Applications (针对分布式应用的分布式调度服 ...
- Android悬浮窗口的实现
效果图:(悬浮框可拖动) 在项目开发中有一个需求:弹出悬浮窗后,响应悬浮窗的事件再弹出对话框,但是对话框怎么也不显示.也就是说在弹出悬浮框的同时,不能再弹出对话框,可能的原因: 1.悬浮框的焦点在最前 ...
- VMware中网络设置之Bridged
1.设置linux虚拟机Bridged模式. 2.查找网关地址:点击虚拟机工具栏编辑---Virtual Network Editor,选中VMnet0,然后在Bridged to 下拉框中选择可以本 ...
- 【要什么自行车】ASP.NET MVC4笔记03:调用编辑器 kindeditor
参考:http://www.cnblogs.com/guzhongx/p/kindeditor.html 1.下载kindeditor,存放于Content文件夹下 <script src=&q ...
- easyui combobox 值怎样获取
$('#com').combobox('getValue')获取当前选中的值$('#com').combobox('getText')获取当前选中的文字