基本几何图形的 css 实现
我们知道,css3通过border-radius、animation、transform等“新”特性可以绘制很多精致的图形。比如腾讯企鹅Logo、超能陆战队中的大白机器人、太阳系、小黄人、叮当猫、安卓机器人、苹果图标等等。
这些图形看似实现起来挺复杂,但它们通常都是由矩形、圆形、椭圆、三角、梯形等基本图形组合而成的。所以我们先从基本图形入手,等熟悉之后,实现复杂图形就成为可能了。
首先从矩形开始,一个具有宽高属性的元素,设置其宽高值、块状显示,即得到一个矩形。
在矩形的基础上通过设置border-radius,可以得到圆角矩形、圆形(当矩形为正方形且四个角的border-radius设为正方形宽度的一半时)和椭圆(当矩形的四个角的border-radius设为50%时)。
下面实现三角形。我们看border属性,当有相邻border时,相邻border相接的部分是矩形的直角,为了形成一个直角,相邻border各贡献一个直角三角形,组成了矩形的直角,而这个直角三角形的直角边边长就是border的宽度。所以我们只要将其中一个border颜色设为transparent或当前背景色,视觉效果就是一个三角形了。见代码:
#div_RightAngle1{ //直角三角形1 width:0; height:0; border-width:30px; border-style:solid; border-top-color:#abc; border-right-color:#abc; border-bottom-color:#fff; border-left-color:#fff; } #div_RightAngle2{ //直角三角形2 width:0; height:0; border-width:30px; border-style:solid; border-color:#fff; border-top-color:#abc; } #div_anyAngle{ //任意三角形 width:0; height:0; border-left:25px solid #fff; border-right:25px solid #fff; border-bottom: 50px solid #abc; }
下面我们结合border与transform实现一个有趣的弯曲箭头,效果图是这样的:。先构造一个直角三角形div,通过transform旋转一定角度,然后使用after伪类通过圆角制造一个弯曲效果。见代码:
#divArrow{ //弯曲箭头 position: relative; width:0; height:0; border-top:9px solid transparent; border-right:9px solid red; transform:rotate(10deg); } #divArrow:after{ position:absolute; content:""; border-top:3px solid red; border-radius:15px 0 0 0; top:-12px; left:-9px; width:12px; height:12px; transform:rotate(45deg); }
接下来实现梯形。前面我们已经知道通过设置宽高均为0、三边有边框且其中一边有可见色的方式可以构建出一个直角三角形,那么我们让元素具有宽度,就可以把相邻的边框给撑开,这样元素内部就形成一个矩形了,如此,梯形就构建出来了,见代码:
#div_Trapezoid{ width:25px; height:0; border-bottom:50px solid #abc; border-left:50px solid #fff; border-right:50px solid #fff; }
实现弯曲箭头的时候我们用到了transform,通过它我们也可以实现平行四边形,见代码:
#div_Parallelogram{ width:200px; height:100px; transform:skew(30deg); }
正方形通过旋转45度可以实现菱形,同样,我们也可以用实现三角形的思想来实现(用两个直角三角形拼起来):
#diamond1{ width:20px; height:20px; transform:rotate(45deg); } #diamond2{ width:0; height:0; border: 25px solid #fff; border-bottom-color:#abc; position:relative; } #diamond2:after{ position: absolute; content:""; left:-25px; top:25px; width:0; height:0; border: 25px solid #fff; border-top-color:#abc; }
接下来,我们对菱形进行变形,实现一个盾牌效果:
#diamond_Shield{ width:0; height:0; border:50px solid #fff; border-bottom: 20px solid #abc; position:relative; } #diamond_Shield:after{ position: absolute; content:""; top:20px; left:-50px; width:0; height:0; border:50px solid #fff; border-top: 70px solid #abc; }
接下来在菱形和梯形的基础上实现钻石形状:
#diamond3{ width:50px; height:0; position: relative; border-style: solid; border-color:#fff #fff #abc #fff; border-width: 0 25px 25px 25px; } #diamond3:after{ position: absolute; content:""; top:25px; left:-25px; width:0; height:0; border-style: solid; border-color: #abc #fff #fff #fff; border-width: 70px 50px 0 50px; }
实现一个小房子:
#house{ background-color: #abc; height:55px; width:100px; position:relative; } #house:before{ content:""; position:absolute; height:0; width:0; left:0; top:-35px; border-bottom: 35px solid #abc; border-left: 50px solid #fff; border-right: 50px solid #fff; }
在三角形的基础上,我们让其中一边成弧形,就形成一个扇形了:
#cone{ background-color: #fff; width:0; height:0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 100px solid #abc; border-radius:50%; }
如果我们想要实现一个月牙形呢?因为月牙是由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,所以我们在圆的基础上让圆有一个阴影就能实现了:
#moon{ background-color: #fff; width:80px; height:80px; border-radius:50%; box-shadow: 15px 15px 0 0 #abc; }
三角形和梯形可以拼成一个五边形,下面我们来实现之:
#pentagon{ background-color: #fff; position: relative; width:54px; border-width: 50px 18px 0; border-style:soild; border-color: #abc transparent; } #pentagon:after{ content:""; position:absolute; height:0; width:0; top: -85px; left:-18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #abc; }
六边形可以用两个三角形和一个矩形拼成、八边形可以用两个梯形和一个矩形拼成,还有五角星可以用两个梯形加一个三角形通过旋转组合实现,这里就不演示了。
明天是七夕,最后我们实现一个心形吧,愿天下有情人终成眷属:
#heart{ width:0; height:0; position:relative; } #heart:before,#heart:after{ position: absolute; content:""; left:50px; top:0; width: 50px; height:80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after{ left:0; transform:rotate(45deg); transform-origin:100% 100%; }
(因为只是演示,所以以上样式均没加浏览器厂商前缀)
通过这些基本图形的实现,以后实现复杂图形就有一定的可能性了。
推荐阅读
-
[C++] 红黑树的实现:原则和基本分析 - 红黑树概念
-
STL 中的 Priority_queue - 深入分析 C++ 中优先队列的实现原理、核心功能和基本机制。
-
学习新的 CSS 属性 conic-gradient 来实现圆形进度条。
-
Webpack】利用Webpack和LocalStorage实现静态资源的离线缓存-基本流程
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
混淆 Java WAR Maven 中的 CSS/JS Class 实现加密
-
CSS Text的基本应用和需留意的地方
-
玩转CSS:基本操作与文本属性的选择器指南
-
玩转CSS text-shadow: 实现文字阴影效果的几种炫酷样式及代码示例
-
玩转CSS!用JavaScript实现动态操作的多种方式