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"的直译上来说,表示的就是裁剪路径.既然有裁剪,咱们就来了解这里面的几个简单的概念. 裁剪就是从某样东西剪切一块.比如说,我们 ...
随机推荐
- CCNA基础 IP地址子网划分
计算机是一个非常神奇的物品,它的核心算法是凌驾于任何代码架构.然而互联网网络( Internat )作为整个生态的基础资源.什么?你还不会子网划分? 没关系,看到子网掩码不要怕.因为它无非就是问你 & ...
- 快速入门系列--NOSQL--05Redis也木有那么“高富帅”
由于工作慢慢从原来的少量用户的企业内部应用慢慢转化为了大量用户的企业内部应用或者直接转为了线上高并发应用,因而也渐渐的开始使用memcached.Redis等缓存服务器,为了便于自身的学习和记忆,特此 ...
- js中如果省略分号那么它是如何运行的
在javascript工作中,我们几乎不会去省略分号:为了不必要的麻烦以及代码的规范,那么如果我们省略:会发生呢?预知详情请听下回分解. 看代码! 片段一: 1 var a 2 = 3 8 4 con ...
- poj3422 Kaka's Matrix Travels(最小费用最大流问题)
/* poj3422 Kaka's Matrix Travels 不知道 k次 dp做为什么不对??? 看了大牛的代码,才知道还可以这样做! 开始没有理解将a 和 a‘ 之间建立怎样的两条边,导致程序 ...
- linux分享六:进程管理
1:批量杀死进程 ps -ef|grep LOCAL=NO|grep -v grep|cut -c 9-15|xargs kill -9 或kill -9 `ps -ef|grep oracle|aw ...
- CLR执行模型
好好学习底层运行机制,从CLR via C# 开始. CLR的执行模型: CLR:Common Language Runtime,是一个可由多种编程语言使用的"运行时".CLR的核 ...
- 【web前端面试题整理05】做几道前端面试题休息休息吧
前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS1. overflow-x 属于 CS ...
- [转载]SVN使用教程
SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...
- 互动教程,让你5分钟掌握 Flexbox 布局模式
Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的.这里分享一个基于 Knockout.js 构建的互动 ...
- EasyUI笔记
以下功能实现朋友们若有更好的思路办法,欢迎留言交流. 1.关闭其他标签页(右键菜单触发,保留左侧第一个欢迎tab) 问题:取到的数组tabs长度会随着tab的关闭而变化 思路:先遍历需要关闭的标签页t ...