‘clip-path’是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧。

首先介绍的是clip-path里面的polygon功能,我们可以通过它来绘制多边形。

先来裁剪一个三角形。

代码如下:

<style>
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%);
}
</style> <div></div>

解释一下代码,polygon里面第一个坐标为X方向,第二个为Y方向,这里我们写的X是50%,Y是0px,也就是说我从这个元素的宽50%开始到高0px裁剪。接着从这个点往下裁剪。也就是PS里面的选区,区域外面的将会被裁剪掉。

就像这样,画的有点丑哈。



因为三角形的话,只要确定三个角就可以了。

另外被裁剪掉的部分不会响应事件。

绘制一个菱形,这是菱形吗?暂且这样叫吧

代码如下:

<style>
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50%
100%,0px 50%);
}
</style>
<div></div>

平行四边形



代码:

<style>
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(0% 60%,20% 0%,60% 0%,40% 60%
,0% 60%);
}
</style>
<div></div>

简直太强大了,有此神器,解决了好多问题,其他图形这里就不再一一演示了。

下面介绍一个傻瓜式工具,来帮我们裁剪。

chrome神器插件下载

注意得再服务器里面才能使用,这里我用sublimeServer插件。



接着我们把它的代码复制下来就行了,简单吧。

利用CSS3 clip-path裁剪各种图形。的更多相关文章

  1. CSS3 clip裁剪动画

    CSS3 clip裁剪动画 下面是比较简单的例子 <pre><html><head><style type="text/css">i ...

  2. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  3. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  4. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  6. 利用CSS3实现页面淡入动画特效

    利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  9. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

随机推荐

  1. OOP感想

    OOP是面向对象编程(Object Oriented Programming).集于一身,最终目的是各司其职,让每个职责的只关注自己那块,其他的不管丢给下一个人.比如说,一个页面,对于客户,只要能看到 ...

  2. JSON取值前判断

    public static void main(String[] args)throws Exception{ String jsonStr1="{\"access_token\& ...

  3. Hadoop上结合opencv\javacv

    mac上安装opencv 1. 去 http://opencv.org 下载最新版OpenCV for Linux/Mac源文件,目前版本是2.4.3.下载后解压.2. 去 http://www.cm ...

  4. umdh工具使用

    先安装工具,http://msdn.microsoft.com/en-us/windows/hardware/gg463009.aspx 选择其中的http://msdn.microsoft.com/ ...

  5. Centos7 设置DNS 服务器

    在CentOS 7下,手工设置 /etc/resolv.conf 里的DNS,过了一会,发现被系统重新覆盖或者清除了.和CentOS 6下的设置DNS方法不同,有几种方式: 1.使用全新的命令行工具 ...

  6. slurm任务调度系统部署和测试(一)

    1.概述 本博客通过VMware workstation创建了虚拟机console,然后在console内部创建了8台kvm虚拟机,使用这8台虚拟机作为集群,来部署配置和测试slurm任务调度系统. ...

  7. Codeforces Round #452 (Div. 2)-899A.Splitting in Teams 899B.Months and Years 899C.Dividing the numbers(规律题)

    A. Splitting in Teams time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. 修复android 5.0 Xutils的框架问题retry error, curr request is null

    Android 5.0手机对xUtils-2.6.13.jar请求时会出现retry error, curr request is null 情况, 修复解决方式: 找到library/src/com ...

  9. 【java】模板方法设计模式

    模板方法:在定义功能时,功能一部分是确认的,另一部分是不确认的或者后续会变化的.这时可以把不确定的部分暴露出去,定义成抽象类或者接口,由子类来完成. abstract class GetDuring ...

  10. 关于Java的接口

    其实刚开始听到接口的时候不解其意,为什么要有接口这个东西,加之老师上课我可能没仔细听(或者时间长了忘了?),这次看到了“用接口设计并实现圆,三角形,矩形的面积与周长计算”这个题目的代码,它将接口定义在 ...