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的更多相关文章

  1. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  2. 理解Clip Path

    http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...

  3. HTML5 Canvas 绘图

    首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...

  4. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  5. CSS的clip-path 一

    首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自  大漠  的文章  http://www. ...

  6. .Net资源总结

    源码文档见官方群(以下为7.4更新内容) 逆天工具 CDN 资源库 国内 Bootstrap中文网开源项目免费 CDN 服务 360网站卫士常用前端公共库CDN服务 百度静态资源公共库 新浪云计算CD ...

  7. CSS的clip-path

    在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨 ...

  8. SVG基本图形及clipPath;

    利用SVG可以实现很多复杂的图形,SVG的功能开发者们已经开发许多,今天初识一下SVG的基本图形绘制, <svg viewbox="0,0,400,400" style=&q ...

  9. CSS3/SVG clip-path路径剪裁遮罩属性简介

    一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属 ...

  10. CSS的clip-path(转)

    基本概念 clip-path从单词"clip path"的直译上来说,表示的就是裁剪路径.既然有裁剪,咱们就来了解这里面的几个简单的概念. 裁剪就是从某样东西剪切一块.比如说,我们 ...

随机推荐

  1. 利用SSIS的ForcedExecutionResult 属性 和CheckPoint调试Package

    1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回 ...

  2. SQL Server Window Function 窗体函数读书笔记二 - A Detailed Look at Window Functions

    这一章主要是介绍 窗体中的 Aggregate 函数, Rank 函数, Distribution 函数以及 Offset 函数. Window Aggregate 函数 Window Aggrega ...

  3. hibernate(二)annotation第一个示例

    一.在数据库中创建teacher表(数据库hibernate) create table teache( id int auto_increment primary key, name ), titl ...

  4. PHP 对象 “==” 与 “===”

    php中对象在内存中的存储方式与java等其他面向对象语言类似,$a = new Person();在内存中表现为$a是堆区中new Person()中的引用 这样当: $a = new Person ...

  5. javase基础复习攻略《九》

    本篇将为大家总结JAVA中的线程机制,谈到线程,大家一定会问线程和进程有什么区别?刚接触进程时我也有这样的疑问,今天就为大家简单介绍一下进程和线程.进程(Process)是计算机中的程序关于某数据集合 ...

  6. java中得到classpath和当前类的绝对路径的一些方法(路径中的%20"进行替换空格)

    原网址:http://blog.csdn.net/shendl/article/details/1427475 (注意:利用下面方式得到路径,如果路径中有空格字符, 那么会有"%20&quo ...

  7. MongoDB的学习--聚合

    最近要去的新项目使用mysql,趁着还没忘记,总结记录以下MongoDB的聚合. 聚合是泛指各种可以处理批量记录并返回计算结果的操作.MongoDB提供了丰富的聚合操作,用于对数据集执行计算操作.在  ...

  8. Android基于mAppWidget实现手绘地图(十六)–处理一次触摸多个地图对象

    最好的处理方式就是弹出一个对话框,将用户触摸过的控件罗列出来.你可以通过实现OnMapTouchListener来处理. 参考以下代码,实现上述功能: mapWidget.setOnMapTouchL ...

  9. 机器学习&数据挖掘笔记_20(PGM练习四:图模型的精确推理)

    前言: 这次实验完成的是图模型的精确推理.exact inference分为2种,求边缘概率和求MAP,分别对应sum-product和max-sum算法.这次实验涉及到的知识点很多,不仅需要熟悉图模 ...

  10. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...