概述

　　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. c++的单例模式及c++11对单例模式的优化

    单例模式 单例模式,可以说设计模式中最常应用的一种模式了,据说也是面试官最喜欢的题目.但是如果没有学过设计模式的人,可能不会想到要去应用单例模式,面对单例模式适用的情况,可能会优先考虑使用全局或者静态 ...

  2. const 和 #define区别

    (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行阶段使用. (2) 类型和安全检查不同 define宏没有类型,不做任何类型检查,仅仅是展开. const常量有 ...

  3. 杭电acm 1037题

    本题应该是迄今为止最为简单的一道题,只有一组输入,输出也简单.... /****************************************** 杭电acm 1037题 已AC ***** ...

  4. 算法Sedgewick第四版-第1章基础-019一Scanner的用法

    package algorithms.fundamentals001; import java.util.Locale; import java.util.Scanner; import algori ...

  5. libmad介绍

    一.简介 libmad是一个开源mp3解码库,其对mp3解码算法做了很多优化,性能较好,很多播放器如mplayer.xmms等都是使用这个开源库进行解码的:如果要设计mp3播放器而又不想研究mp3解码 ...

  6. 树莓派研究笔记（1）-- 安装Mono

    职业病啊,原谅我,第一步就是要安装Mono搞DOTNET 1. 更新系统 sudo apt-get update 2. 安装 Mono sudo apt-get install mono-comple ...

  7. java 中一个char包含几个字节

    背景   char包含几个字节可能记得在上学的时候书上写的是2个字节,一直没有深究,今天我们来探究一下到底一个char多少个字节? Char   char在设计之初的时候被用来存储字符,可是世界上有那 ...

  8. sequoiadb的c++应用开发1

    使用sequoiadb开发c++应用时需要使用BSON对象,本篇主要讲下BSON的操作方面的东西 1:构建一个_id的BSON对象 BSON的c++驱动给我提供了一个宏BSON,使用该对象可以很方便的 ...

  9. C# 中窗口AutoScaleMode属性

    C# 窗体中有一个AutoScaleMode 这个属性,我们大家可能用的比较少. 它的作用是:当屏幕分辨率或字体发生改变时,窗体和控件是如何发生变化的.

  10. 《Head First Servlets & JSP》-11-Web应用部署

    Web目录 WAR文件 WAR文件只是Web应用结构的一个快照,采用了一种更可移植的压缩形式. 建立WAR文件时,就是把整个Web应用结构(去掉Web应用上下文目录,就是把WEB-INF之上的一级目录 ...