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

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(2) negative(0) views2826 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • 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...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • Canvas实例教程:图像移动、大小调整和裁剪

    本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...

  • 更多...