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

iefreer 发表于 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(1) negative(0) views1886 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • 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的快捷方式...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • NodeJS、Java和PHP性能考量和若干参考结论

    首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • WebGL入门教程2 - GPU基本概念和工作流水线

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

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

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

  • 更多...