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

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(3) negative(1) views4435 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

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

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

  • CentOS6 Apache2.2用域名配置多虚拟机

    在CentOS下使用域名配置多虚拟机的步骤如下:
    1. 使用

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

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

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • 学习使用CSS制作进度条

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

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

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

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

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

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

  • 更多...