概述

　　clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法。

　　[注意]  IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀。

【clip-path】

　　值：<clip-source> | [ <basic-shape> || <geometry-box> ] | none

　　<clip-source>：url()

　　<basic-shape>：inset() | circle() | ellipse() | polygon()

　　<geometry-box>：fill-box | stroke-box | view-box | margin-box | borer-box | padding-box | content-box

　　初始值：none

　　应用于：所有元素

　　继承性：无

可实现效果之一：

原图：

代码实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                width:300px;

                height:300px;

                margin:100px;

                border:1px solid black;

                padding:10px;

            }

            .outer{

                width:%;

                height:%;

                background:url("timg.jpg") no-repeat center center;

                background-size:% %;

                -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

                clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="outer"></div>

        </div>

    </body>

</html>

【工具】

　　clippy是一个在线的路径裁剪工具，可以使用clip-path属性裁剪出任意的图形。

　　

参考文章：http://www.cnblogs.com/xiaohuochai/p/7509225.html

clip-path（css）的更多相关文章

  1. Java Learning Path（四） 方法篇

    Java Learning Path(四) 方法篇 Java作为一门编程语言,最好的学习方法就是写代码.当你学习一个类以后,你就可以自己写个简单的例子程序来运行一下,看看有什么结果,然后再多调用几个类 ...

  2. Java Learning Path（五）资源篇

    Java Learning Path(五)资源篇 1. http://java.sun.com/ (英文) Sun的Java网站,是一个应该经常去看的地方.不用多说. 2.http://www-900 ...

  3. Java Learning Path（三）过程篇

    Java Learning Path(三)过程篇 每个人的学习方法是不同的,一个人的方法不见得适合另一个人,我只能是谈自己的学习方法.因为我学习Java是完全自学的,从来没有问过别人,所以学习的过程基 ...

  4. .less css 使用 LESS 简化层叠样式表（CSS）的编写（另外一种css框架 sass）

    使用 LESS 简化层叠样式表(CSS)的编写 https://less.bootcss.com/ Sass完全兼容所有版本的CSS https://gojs.net/latest/samples/f ...

  5. 《CSS3实战》读书笔记 第2章 层叠样式表（CSS）

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  6. html5中的一些小知识点（CSS）

    1.点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了 2.文字左右居中: text-align 属性值为 center 3.文字上下居中:  ...

  7. less的学习（css）

    因为新公司需要用less来写样式,对于用惯了css的我来说还是觉得有点麻烦 但是呢,都是有个过程嘛,学习必须走起嘛. 写到半中央发现一个写的特别好的less帖子,就不写. http://www.w3c ...

  8. 兼容性问题（ css）

    记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新 提出时间 问题描述 解决方案 2014/7/15 table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字 ...

  9. 前端面试题整理（css）

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  10. Html基础详解之（CSS）

    css选择器 CSS选择器用于选择你想要的元素的样式的模式. “CSS”列表示在CSS版本的属性定义(CSS1,CSS2,CSS3). CSS id和class选择器 <!DOCTYPE htm ...

随机推荐

  1. GET与POST方法

    HTTP中的GET,POST,PUT,DELETE对应着对这个资源的查,改,增,删4个操作.GET一般用于获取/查询资源信息,而POST一般用于更新资源信息. 1.根据HTTP规范,GET用于信息获取 ...

  2. 第5章 选举模式和ZooKeeper的集群安装 5-2 单机伪分布式安装zookeeper集群

    先搭建伪分布式集群,再去搭建真分布式集群.有些的人的电脑内存.性能比较低,所以在搭建真实的一个分布式环境的话,可能会相对来说比较卡,所以两种都会做一下,首先会在单机上搭建一个集群.单机上的集群主要就是 ...

  3. ROS探索总结（五）——创建简单的机器人模型smartcar

    前面我们使用的是已有的机器人模型进行仿真,这一节我们将建立一个简单的智能车机器人smartcar,为后面建立复杂机器人打下基础. 一.创建硬件描述包 roscreat-pkg  smartcar_de ...

  4. 指静脉屏幕说明usart hmi

    1. 1.usart HMI 下载最新版软件 2.如上图可以设置横屏 3.txt的最大字符默认是10 要改大一些 4.t0.txt="aaa" 这是串口通讯命令但前面还有开始码

  5. bzoj4391 [Usaco2015 dec]High Card Low Card

    传送门 分析 神奇的贪心,令f[i]表示前i个每次都出比对方稍微大一点的牌最多能赢几次 g[i]表示从i-n中每次出比对方稍微小一点的牌最多赢几次 ans=max(f[i]+g[i+1]) 0< ...

  6. Edison UVALive3488

    传送门 题目大意 有一个0~n-1的序列,有m次操作,操作包含三个元素:pl,len,ti,表示这个操作进行ti次,每次将从pl+1开始的len个元素移到序列头部.分析 看到题不难想到使用平衡树将需移 ...

  7. 格式化字符串攻击原理及示例.RP

    格式化字符串攻击原理及示例 一.类printf函数簇实现原理 类printf函数的最大的特点就是,在函数定义的时候无法知道函数实参的数目和类型. 对于这种情况,可以使用省略号指定参数表. 带有省略号的 ...

  8. AbstractBootstrap的研读

    AbstractBootstrap是一个工具类,用来配置和启动Channel的,下面看下AbstractBootstrap的类继承,ServerBootstrap用于启动ServerChannel的, ...

  9. 如何使用ArcPy

    ArcPy可以很方便的通过脚本调用ArcGIS的各种函数和功能.在此简单介绍一下.方法包括两种,第一种是直接使用ArcGIS中的命令行,输入一句,执行一句:第二种是创建一个Python脚本,直接执行其 ...

  10. Java50道经典习题-程序25 根据输入求输出

    题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同.分析:分别创建两个数用于判断,一个数为12321,另一个数是12341 分别取出该数的"个十百千万 ...