CSS3绘制不规则图形的一些方法示例


Posted in HTML / CSS onNovember 07, 2015

前言

CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。

现在,我们已经可以使用CSS 3 常见不规则复杂图形了,如下图所示:
CSS3绘制不规则图形的一些方法示例

使用CSS创建的图形,无法内置文字或实现文字环绕效果。因此,如何实现不规则图形和文字复杂布局也成为了一个热议话题。

今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形,实现不规则的文本布局。学会如何创建不规则图形之后,你就可以发挥想象力,创建唯美的CSS页面了,下图既是使用该技术创建的《爱丽丝梦游仙境》效果图:
CSS3绘制不规则图形的一些方法示例

注:这是CSS的最新技术,所以对浏览器版本要求较高。如果需要查看在线示例你需要确保浏览器支持这个CSS技术。在本文中我也将提供一些效果截图查看效果。

声明图形

我们需要使用shape-outside 属性声明不规则图形。当前, shape-outside 属性只能被应用于浮动元素,并且只能应用于块级元素。如果需要在非块级元素上使用这些属性,必须先把元素声明为块级。

Shape-* 值有三种赋值方式: 自动,基本图形或者图片链接。如果被设置为自动,浮动元素将继续作为传统的盒模型进行渲染。如果你还不熟悉盒模型,请参考CSS盒模型,这是阅读本篇文章的基础。

绘制方法包括:rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通过链接查看详细的描述。

如果属性被设置为图片链接, 浏览器会按照图片的“alpha通道”来绘制图形形状。

在元素上创建坐标系

声明了CSS 图形之后,我们首先需要创建将用于绘制图形的坐标系。

坐标系是非常必要的,因为图形需要依据此坐标系上的点阵进行绘制。shape-* 属性是基于盒模型的,为了使它启作用,需要明确指定盒子的大小,限制不规则图形在盒子范围内,它也将被用于创建绘制坐标系,坐标系的起点位于形盒子左上角。如果没有明确宽和高声明, shape-* 属性将不启作用。

设置自定义图形的背景色

应用了自定义图形,它的盒模型仍然存在,其它传统的样式设置将作用于盒模型范围。例如,下面这个例子中,

我们仅仅想创建一个浮动圆形,并设置这个圆形的背景色。按照正常的思路理解,效果应该是这样的:
CSS3绘制不规则图形的一些方法示例

但是当设置了盒子的背景色后,你会发现和预期的效果不同,效果如下:
CSS3绘制不规则图形的一些方法示例

在上图中我们看到背景色被应用到盒模型范围,而不是我们预想的圆形内。

那么,我们应该怎样设置圆形的背景色呢?这就引出了一个新的CSS样式: clip-path 。clip-path 用于限制当前样式的作用范围。在下面的例子中你将看到它的使用方法。

提醒

现在,shape-outside 属性只作用域浮动的元素,并且仅限制于在块级元素上应用。使用这些属性定义的元素,其周围的文本将依赖于图形形状排布。未来的CSS 形状将不仅仅限制与应用于浮动元素上,我们将不仅仅可以在文本外部的图形上做文章,完全可以在其内部定义自定义图形,实现如下效果:
CSS3绘制不规则图形的一些方法示例

实例-使用shape-outside 创建环绕于自定义形状的浮动文本

我们从一个简单的例子开始。在实例中我们将创建一个自定义图形,并且内置文本流,最终效果图如下(文章末尾提供实例下载链接):
CSS3绘制不规则图形的一些方法示例

例子中我们拥有两个容器,用于设置自定义形状和嵌套文本内容。代码如下:

CSS Code复制内容到剪贴板
  1. <div class="container">   
  2. <div class="shaped"></div>   
  3.   
  4. <div class="content">   
  5.   
  6. <h1><span>La</span> Tour <br/>Eiffel</h1>   
  7.   
  8. <p>Lorem Ipsum.....</p>   
  9.   
  10. </div>   
  11.   
  12. </div>  

首先我们需要声明浮动区域的DIV节点,并且使用固定值设置大小。代码如下:

CSS Code复制内容到剪贴板
  1. .container{   
  2. overflow:hidden;   
  3.   
  4. height: 100vh;   
  5.   
  6. width: 100vw;   
  7.   
  8. }   
  9.   
  10. .shaped{   
  11.   
  12. float:left;   
  13.   
  14. height:100vh;   
  15.   
  16. width:40vw;   
  17.   
  18. float:rightright;   
  19.   
  20. backgroundblack url(../images/eiffel.jpg) center top no-repeat;   
  21.   
  22. background-size:cover;   
  23.   
  24. }  

现在坐标系已经创建成功,接下来我们将要绘制图形了。可以通过两种方式来绘制图形:

使用polygon()

我们可以使用polygon() 方法来计算图形范围。这个方法从坐标系中获取多个点用于绘制图形,每个点由(x, y)值定位。 例子中我们将要创建一个非常简单的多边形,如下图所示:
CSS3绘制不规则图形的一些方法示例

坐标点的单位可以是固定值,或者百分比。在这个例子中我们将以百分比的形式设置点阵位置。接下来我们需要应用这个样式在浮动元素上。

CSS Code复制内容到剪贴板
  1. .shaped{   
  2. /*…*/  
  3.   
  4. shape-outside: polygon(0 0, 100% 0, 100% 100%,30% 100%);   
  5.   
  6. shape-margin20px;   
  7.   
  8. }  

应用以上的样式后,一个不规则的图形-梯形产生了。

可以看到代码中使用了shape-margin 属性,它用于设置图形和文本内容之间的边距。

接下来需要添加背景图,需要注意在添加背景图之后,它将被应用于盒模型,目前为止效果如下:
CSS3绘制不规则图形的一些方法示例

所以,为了达到预期效果,我们需要设置clip-path 属性,并且设置其范围和shape-outside 属性相同。

CSS Code复制内容到剪贴板
  1. .shaped{   
  2. /*…*/  
  3.   
  4. clip-path: polygon(0 0, 100% 0, 100% 100%,30% 100%);   
  5.   
  6. }  

现在,我们就通过polygon() 方法实现了目标效果。

使用图片链接

我们也可以通过图片(严格说是拥有通明区域的图片)来创建不规则图形,依据图片的“alpha通道” 生成不规则图形。

例如,替代polygon() 声明方法。我们可以设置shape-outside 属性值为图片URI,浏览器就会自动依据图片来绘制不规则图形。
CSS3绘制不规则图形的一些方法示例

图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。代码如下:

CSS Code复制内容到剪贴板
  1. .shaped{   
  2. /*…*/  
  3.   
  4. shape-outsideurl(/images/mm.png);   
  5.   
  6. shape-image-threshold: 0.5;这个属性用于设置浮动区域透明度范围   
  7.   
  8. }  

上述的两种方法都拥有各自的优缺点。例如,如果图形过于复杂,通过图片方法比手动计算图形绘制节点更方便。

HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 #HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 #HTML / CSS
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python单例模式实例详解
2017/03/01 Python
python中map的基本用法示例
2018/09/10 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python如何制作缩略图
2019/04/30 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
个人自荐信
2013/12/05 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
如何利用python创作字符画
2022/06/25 Python