创建非矩形网页页面元素的常用技术和实例代码

techbrood 发表于 2017-03-01 17:07:11

标签: html5, svg, css3, shape, clip-path

- +

非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:

blob.png

而随着技术发展,这种设计在技术实现上也变得更容易。

本文以最简单的三角形为例,演示使用5种方法来达到非矩形设计的界面效果。

使用透明图片遮盖


优点是兼容性好,IE都能搞定,缺点是性能差。

使用SVG多边形元素

http://wow.techbrood.com/fiddle/33382

优点是能制作很复杂的形状并且在桌面浏览器上得到很好的支持。和其他方法相比,这是目前最推荐的方式。

使用CSS3裁剪路径(clip-path)特性

http://wow.techbrood.com/fiddle/33383

这个方法技术上最先进,性能也理应最好,但可惜兼容性上面,还有一些浏览器不支持(尤其是过时的IE)。

使用CSS3扭曲变换(skew)特性

http://wow.techbrood.com/fiddle/33384

缺点需要引入新元素,并且得小心skew会使得所有子元素也被变形,另外得小心动画的处理。

使用border-radius来实现

(小练习,请自行实现,类似于用border-radius来实现一个三角形。)


总结和建议

推荐使用第2种方法(使用svg),理由是性能比方法1好,兼容性比方法3好,且能实现更为灵活的形状。

如果css3的路径裁剪(clip-path)特性得到更为广泛的支持,那么再切换到纯CSS3的方式。

possitive(12) views9569 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 更多...