概述

　　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. 自定义Android Studio方法注释模板

    前言 你们从Eclipse转到Android Studio的时候,是不是会怀念Eclipse的方法注释模版? 敲/**加回车,模板就出来了,而Android Studio却不能自定义(或者我没有找到) ...

  2. madplay的使用方法

    管理madplay的主程序,包括播放,暂停播放,恢复播放,停止播放 system("madplay north.mp3 &");//利用system函数调用madplay播 ...

  3. day70 12-存储过程和存储函数

    什么是相关子查询? 这是一个子查询,子查询本身又是一个多表查询.where不能用组函数,但是可以用字符函数instr().除了order by排序没有考,查询语句的所有内容都考了.这个题有点难度. 今 ...

  4. day17 9.关闭资源与异常处理

    Java程序跟任何外部设备进行连接之后,都要把连接断开,把资源释放掉.Connection是一个重量级资源,Connecton占内存,Connection的获取是比较消耗资源和内存的.finally是 ...

  5. 【总结整理】openlayer加载搜狗地图，qq地图，mapabc

    qq    http://www.cnblogs.com/gisvip/archive/2012/11/01/2750493.html mapabc    http://www.cnblogs.com ...

  6. 202. Happy Number 平方循环数

    ［抄题］: Write an algorithm to determine if a number is "happy". A happy number is a number d ...

  7. Zbar -- 源码分析

    博客转载自:https://blog.csdn.net/sunflower_boy/article/details/50783179 //Img_scanner.c 文件内 int zbar_scan ...

  8. Elasticsearch - glossary

    From http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/glossary.html glossary of ...

  9. vue 之 Nodejs介绍

    Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 Chrome V8 ...

  10. opencv中读写视频

    1.介绍 OpenCV 读写视频之前,先介绍一下编解码器(codec) .如果是图像文件, 我们可以根据文件扩展名得知图像的格式.但是此经验并不能推广到视频文件中. 有些 OpenCV 用户会碰到奇怪 ...