概述

　　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. 超详细的Maven使用教程

    原文:  http://blog.csdn.net/u010425776/article/details/52027706 主题 Maven 什么是Maven? 如今我们构建一个项目需要用到很多第三方 ...

  2. 离散对数的求解(bsgs)

    bsgs算法 主要用来解决${A^x} = B(\bmod C)$(c是质数),都是整数,已知A.B.C求x. 例:poj 2417 Discrete Logging 具体步骤如下: 先把$x = i ...

  3. php环境引起的"syntax error unexpected $end"

    今天在网上淘了一段php和javascript的二级联动下拉菜单的代码.本地运行的时候,一直提示错误 syntax error unexpected $end 本来还以为是括号或者标签没有用好,但是仔 ...

  4. 389. Find the Difference 找出两个字符串中多余的一个字符

    ［抄题］: Given two strings s and t which consist of only lowercase letters. String t is generated by ra ...

  5. C语言-郝斌笔记-004判断是否为回文数

    判断是否为回文数 # include <stdio.h> int main(void) { int val; //存放待判断的数字 int m; ; printf("请输入您需要 ...

  6. Django 链接数据库错误 Strick Mode 解决

    报错信息: WARNINGS:?: (mysql.W002) MySQL Strict Mode is not set for database connection ‘default‘HINT: M ...

  7. Jtabbedpane设置透明、Jpanel设置透明

    摘自 https://zhidao.baidu.com/question/983204331427010139.html java中如何设置Jtabbedpane为透明 20 在Jtabbedpane ...

  8. Inheritance with EF Code First: Part 1 – Table per Hierarchy (TPH)

    以下三篇文章是Entity Framework Code-First系列中第七回:Entity Framework Code-First(7):Inheritance Strategy 提到的三篇.这 ...

  9. Mac安装破解版Office 2016办公软件

    一.相关软件 Microsoft Office 2016 For Mac Cracker 破解工具 资源地址(链接:https://pan.baidu.com/s/1Z5CIv-XbxS08MniYN ...

  10. WordCount程序及测试

    Github地址:https://github.com/CG0317/WordCount PSP表: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划  30 ...