css绘制不规则图形

CSS绘制不规则图形

在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表、不规则图形、规则图形;


常见方法
  • 对于图形的实现,可以大体上分为几种做法

(1) 背景图片,请UI小姐姐帮你吧……此处略过;

(2) CSS3的属性:圆角、透明度、变形、边框、伪类等属性实现;

(3) 渐变属性:通常使用线性渐变实现切角;

(4) 裁剪属性:

(5) Canvas实现:

  • 比较
方法描述适用性优点缺点
背景图
CSS3属性
渐变属性
图像裁剪
Canvas

一、背景图实现

背景图存在的问题:

  • 占用资源较大,修改维护不方便,灵活性不足;
二、CSS3属性:图形实现

大体可以划分为:

  • 三角形系列:三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角;
  • 圆形系列:圆形、椭圆、扇形、圆环、月牙、蛋形
  • 四边形系列:正方形、长方形、菱形、平行四边形、梯形、直角梯形
  • 多边形系列:五边形、钻石、六边形、八边形、
  • 特殊形状:心形、无穷大符号、食人豆、太极图
  • 星形系列:五角星、六角星、八角星、十二角星
  • 实际需求:对话框

示例代码:

width="100%" height="300" src="//jsfiddle.net/Bumphy/t6L3b9as/embedded/result,html,css/dark/" allowfullscreen="allowfullscreen">
三、渐变属性

渐变分为:径向渐变、线性渐变;

关键是掌握三个要素:

  • 渐变线(gradient line)
  • 渐变线上的起始点(starting point)和结束点(ending point)
  • 在起始点和结束点上的颜色值

推荐阅读:深入理解 CSS linear-gradient

width="100%" height="300" src="//jsfiddle.net/Bumphy/nm8chkfj/5/embedded/result,html,css/dark/" allowfullscreen="allowfullscreen">
四、图像裁剪

谈到,图片裁剪,有两个属性,clipclip-path 。其实clip-pathclip的替代属性。

由于clip属性已经被从web标准中移除了,所以这里就不介绍它了,无情地抛弃它了。

如果对clip感兴趣,具体可以看这里

这里,我们主要来了解一下clip-path属性。

clip-path属性可以用于通过裁剪图片,来显示期望中的图片形状。

先让我们来看几个例子:

width="100%" height="300" src="//jsfiddle.net/Bumphy/pyd4suo2/embedded/result,html,css/dark/" allowfullscreen="allowfullscreen">
  • 适用性:所有元素;在SVG中,它适用于除defs元素和所有图形元素之外的容器元素;

  • 取值:

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

这么多取值,完全分不清呀喂!!!没关系,来个示例肿么样?

一个有意思的网站

变形之css shapes

CSS Shapes 标准定义了可以被 CSS 属性值使用的图形描述方法。

标准目前主要有两个版本。当前标准为第一版,第二版还在迭代过程之中。

该标准的第一个版本主要包含 3 个属性:shape-outsideshape-image-threshold以及shape-margin

shape-outside可以实现内容能绕着不规则几何图形排列。

取值:

circle函数:定义一个正圆。可以指定半径和圆心位置。 对于半径,只能接受非负数,负数不允许。默认地,使用短边作为直径。 如果使用百分数,百分数的定义是 sqrt(width2+height2)/sqrt(2)。几何定义为:“对角线长度与单位面积对角线长度的比值”。 有两个快捷值可以设置:closest-side和farthest-side 圆心位置默认为中心,如果需要指定须以at引导的数据。此数据可以是百分数或这 center/left/right 的组合。 完整的参数形如:circle(100px at center 25%)

ellipse函数:定义一个椭圆。和circle函数的参数大致一样。指定半径时候可以指定两个参数。椭圆函数的长轴和短轴只能在宽度方向和高度方向产生。如果指定的话,就是依次指定水平和垂直的半径。 完整的参数形如:ellipse(100px 200px at center 25%)

inset函数:定义一个内部矩形。这个矩形可以把周围的内容放进去。参数有两个,一个是矩形的上右下左的百分比坐标,类似与margin的指定原则,但必须是百分数。第二个参数为这个矩形的 border 半径,以round引导。 完整的参数形如:ellipse(0% 66% 1% 1% round 50%)

polygon函数:表示一个封闭的多边形区域。语法为:polygon(X1 X1, … , Xn Yn)。意思是由 N 个点构成的多边形。Xi 和 Yi 代表每个顶点所示的坐标,坐标可为像素值或者百分比。Xi,Yi与Xi+1,Yi+1即为相邻顶点的边。Xn,Yn与X1,Y1也是连接的。

对于多边形,存在有多种填充逻辑,用于判定一个点在多边形的“内部”还是“外部”。目前标准支持两种,这与 SVG 标准一致。

nonzero:按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从 0 开始计数,路径从左向右穿过射线则计数加 1,从右向左穿过射线则计数减 1。得出计数结果后,如果结果是 0,则认为点在图形外部,否则认为在内部。

evenodd:按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。

默认地,标准指定为nonzero。如果是evenodd可以在polygon函数中传第一个参数。

在线工具

shape-image-threshold
这个属性一般和shape-outside联合使用,此时,shape-outside的属性应设置为一张图片。此时,shape-image-threshold 用于从图像中提取形状的阈值。形状由 alpha 值大于此阈值的像素定义。

.el{
	shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-9.jpg);
  	shape-image-threshold: 0.0;
}

此处需要注意:

不能使用file:协议进行测试。
注意同源策略。
未来的协议可能会倾向使用图片数据的亮度来取代目前的 alpha 通道。为此会提供一个开关选项。未来同时兼容这两种值的时候,究竟是亮度还是 alpha 通道,取决于这个开关选项值的状态。

shape-margin
shape-margin表示在 CSS 形状的浮动区域周围添加空白区域来避免周围内容和形状区域重叠。下面的代码是一个使用的例子。

.float {
    shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
    shape-margin: 10px;
}

shape-margin可以为:px、em、rem、百分比或者 calc()函数值。但必须为非负数。下面展示了几个可能的取值:

shape-margin: 10px;
shape-margin: 1em;
shape-margin: 5%;
shape-margin: calc(2em - 1px);

引用
形神兼备——谈谈CSS Shapes

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值