概述

　　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. 每天一道算法题(15)——打印1到最大的n位数

    题目: 打印1到最大的n位数.如n=4,打印1-9999. 思路: 由于直接使用循环会导致int或者long long都不够存储.因此使用字符串来存储数据,这里涉及到数字转换成字符串以及字符串的加法. ...

  2. [转]AJAX工作原理及其优缺点

    1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...

  3. 吐槽下linq to sql的分页功能

    在调试程序的时候发现一个非常奇怪的问题: 用使用linq分页,分页到第二页的时候,第二页里面有第一页里出现的数据,开始还以为是. linq语句写的有问题,调试半天,无解.后来发现是因为没有排序的缘故. ...

  4. Windows系统 为 QT5软件 搭建 OpenCV2 开发环境

    Windows系统 为 QT5软件 搭建 OpenCV2 开发环境 我们的电脑系统:Windows 10 64位 Qt5 软件:Qt 5. 7. 0 OpenCV2 版本:OpenCV2.4.10 1 ...

  5. 269D Maximum Waterfall

    传送门 题目大意 给出一些墙,水从高往低流,每次只能到达一面墙,选择一个路径,使得路径上的流量的最小值最大. 分析 这是一道经典的扫描线题,我们发现能够合法的线段对数至多只有n对.将一条线段拆成两个点 ...

  6. python--输出spwm的数组

    python的功能是非常强大的,这个例子使用python编写的输出spwm数组(不对,在C语言或者其他语言叫做数组,在这里叫做list.)的程序,我们在单片机程序里调用这个程序,可以达到输出spwm波 ...

  7. 使用LogParser 将iis日志导入到数据库中

    --注意修改日志位置和表名--u_ex180228.log 日志所在位置 --IISLog 表名--IISLog_table_0228 表名"C:\Program Files (x86)\L ...

  8. git rm 与 git reset

    https://www.cnblogs.com/sunshine-xin/articles/3521481.html 1. git rm --cached file will remove the f ...

  9. python的发音

    我一直读的是:拍方(可能是受有道词典发音的影响了~),可是别人都听不懂,他们大多是读的拍森. 来看看下面这个小伙伴的解释,感觉他说的挺好: “θ”这个字符的发音,有 80% 的中国人(学英文的人)都读 ...

  10. 【转】如何知道DLL是32位还是64位

    源地址:http://blog.csdn.net/skysword2/article/details/52588624