CSS样式clip-path绘制图形裁剪图片

发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用,几乎任何形状都可以做出来,下面使用clip-path制作正三边形至正八边形以及其它图形的方法,并且有些正多边形需要通过一定的计算,顺便放了计算公式。通过应用这些正多边形和其它的形状的实现方法来学习clip-path这个样式。

先看看兼容性:

看完兼容之后,你可确定是否在你的项目中应用这个clip-path样式,接下来用实例来学习一下这个样式。

图片裁剪

通过上面方法绘制图形,然后设置背景图片,即可达到裁剪图片的目的

div{    
-webkit-clip-path: polygon(52% 7%, 19% 73%, 92% 61%);    
clip-path: polygon(52% 7%, 19% 73%, 92% 61%);    
background-color: #d3d0c9;    
background-image: url(pics/pittsburgh.jpg);    
background-size: cover;    
background-position: center center;
}

上面裁剪的例子,一堆数字值看上去十分晕,你不清楚它为什么这么写,就像我不清楚为什么女生上厕所要成群结队呢?是这样吗?

跑题了?,此刻不知道想什么.... ,

下面来十来个例子,助你搞定这个样式的用法。

正三角形

div{    
    width:100px;    
    height:87px;    
    background:#25883D;    
    -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
}

正四边形(正方形)

div{    
    width:100px;    
    height:100px;    
    background:#4AE90E2;    
    -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}

正五边形

正五边形需要计算一下,59/(59+95)=38.31%31/(81*2)=19.14%:

div{    
width:162px;    
height:154px;    
background:#B8E986;
-webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}

正六边形

正六边形的计算比较简单,50/(100+50*2)=25%150/(100+50*2)=75%:

div{    
    width:200px;    
    height:174px;    
    background:#B8E986;    
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

正七边形

正七边形是这里计算需要的步数是最多的:22/(100+62*2)=10.09%202/(100+62*2)=90.18%43/(43+97+78)=19.72%(43+97)/(43+97+78)=64.22%62/(100+62*2)=27.68%(100+62)/(100+62*2)=72.32%:

div{    
width:224px;    
height:218px;    
background:#9013FE;    
margin: 50px auto;    
-webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
}

正八边形

正八边形的计算如下:71/(100+71*2)=29.34%(71+100)/(100+71*2)=70.66%:

div{    
width:242px;    
height:242px;    
background:#FF70F9;    
-webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
}

圆形 circle(半径 at 圆心坐标)

.circle{
    width:100px;
    height:100px;    
    background:#0cc;    
    -webkit-clip-path:circle(50% at 50% 50%);
}

椭圆形 ellipse(长短轴半径 at 圆心坐标)

.ellipse{  
    width:100px;  
    height:100px;  
    background:#D8D8D8;  
    -webkit-clip-path:ellipse(25% 50% at 50% 50%);
}

內置矩形 inset( 上右下左的邊距 round 上右下左圓角 )

.inset{    
    width:100px;    
    height:100px;    
    background:#99f;    
    -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);
}

正多变形动画实例

<style>
    .s{
        width:100px; height:87px; 
        -webkit-animation:s 5s infinite linear alternate;    
    }
    .a{
        width:100%;height:100%;      
        -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%);      
        -webkit-animation:a 5s infinite linear alternate;    
    }
    @-webkit-keyframes s{
      0%,5%{width:115px;height:100px;}
      24%{width:100px;height:100px;}
      43%{width:105px;height:100px;}
      62%{width:114px;height:100px;}
      81%{width:103px;height:100px;}
      95%,100%{width:100px;height:100px;}
    }    
    @-webkit-keyframes a{
      0%,5%{
        background:#c00;
        -webkit-clip-path:polygon(0% 100%, 50%  0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% );
      }
      24%{    
        background:#069;
        -webkit-clip-path:polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% );      }
      43%{
        background:#095;
        -webkit-clip-path:polygon(19.14% 100%, 0% 38.31%, 50% 0%, 100% 38.31%, 80.86% 100%, 80.86% 100%, 80.86% 100%, 80.86% 100% );      }
      62%{      
        background:#f80;
        -webkit-clip-path:polygon(25% 100%, 0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 75% 100%, 75% 100% );      }
      81%{      
        background:#09c;
        -webkit-clip-path:polygon(27.68% 100%, 0% 64.22%, 10.09% 19.72%, 50% 0%, 90.18% 19.72%, 100% 64.22%, 72.32% 100%, 72.32% 100% );      }
      95%,100%{      
        background:#f69;
        -webkit-clip-path:polygon(29.34% 100%, 0% 70.66%, 0% 29.34%, 29.34% 0%, 70.66% 0%, 100% 29.34%, 100% 70.66%, 70.66% 100% );
      }
    }
</style>

HTML代码

<div class="s">
    <div class="a"></div>
</div>

相关参考链接:

W3C:https://www.w3.org/TR/css-masking-1/#the-clip-path

clip-path在线制作工具:http://bennettfeely.com/clippy/[★★★★★]

查看兼容:http://caniuse.com/#search=clip-path

原文发布于微信公众号 - JSdig(jsdigs)

原文发表时间:2016-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

【图表大师三】仿gartner清爽圆角矩阵图

在Gartner的报告中,常看到如下图的清爽圆角矩阵图。 ? 我很喜欢这种清爽的图表风格,其特点有:干净清爽的颜色,优雅的圆角绘图区,个性的XY坐标轴。...

2036
来自专栏前端知识分享

第154天:canvas基础(一)

​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(...

872
来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

9987
来自专栏黒之染开发日记

HTML5 canvas drawImage() 方法记录

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。 注释:Interne...

1152
来自专栏阮一峰的网络日志

关于颜色理论

我的意思是,我不知道应该选择哪些颜色放在一起,完全凭感觉。于是昨天,我在网上找了一些资料,希望找到理论指导。

1842
来自专栏WD学习记录

2016-7-3 webGL

ctx.fillRect(120,10,150,150);前两个为x、y坐标后边为长和宽

872
来自专栏知识分享

3-关于"小五物联"的功能介绍(添加波形图,Achartengine)

2363
来自专栏前端小吉米

SVG 动画精髓

2405
来自专栏深度学习之tensorflow实战篇

Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图

python中使用wordcloud包生成的词云图。 下面来介绍一下wordcloud包的基本用法。 class wordcloud.WordCloud(fon...

5076
来自专栏极客猴

Python 绘图,我只用 Matplotlib(二)

上篇文章,我们了解到 Matplotlib 是一个风格类似 Matlab 的基于 Python 的绘图库。它提供了一整套和matlab相似的命令API,十分适合...

1241

扫码关注云+社区

领取腾讯云代金券