我们知道,css3通过border-radius、animation、transform等“新”特性可以绘制很多精致的图形。比如腾讯企鹅Logo、超能陆战队中的大白机器人、太阳系、小黄人、叮当猫、安卓机器人、苹果图标等等。

  这些图形看似实现起来挺复杂,但它们通常都是由矩形、圆形、椭圆、三角、梯形等基本图形组合而成的。所以我们先从基本图形入手,等熟悉之后,实现复杂图形就成为可能了。

  首先从矩形开始,一个具有宽高属性的元素,设置其宽高值、块状显示,即得到一个矩形。

  在矩形的基础上通过设置border-radius,可以得到圆角矩形、圆形(当矩形为正方形且四个角的border-radius设为正方形宽度的一半时)和椭圆(当矩形的四个角的border-radius设为50%时)。

  下面实现三角形。我们看border属性,当有相邻border时,相邻border相接的部分是矩形的直角,为了形成一个直角,相邻border各贡献一个直角三角形,组成了矩形的直角,而这个直角三角形的直角边边长就是border的宽度。所以我们只要将其中一个border颜色设为transparent或当前背景色,视觉效果就是一个三角形了。见代码:

  

#div_RightAngle1{ //直角三角形1
width:;
height:;
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:;
height:;
border-width:30px;
border-style:solid;
border-color:#fff;
border-top-color:#abc;
}
#div_anyAngle{ //任意三角形
width:;
height:;
border-left:25px solid #fff;
border-right:25px solid #fff;
border-bottom: 50px solid #abc; }

下面我们结合border与transform实现一个有趣的弯曲箭头,效果图是这样的:。先构造一个直角三角形div,通过transform旋转一定角度,然后使用after伪类通过圆角制造一个弯曲效果。见代码:

#divArrow{ //弯曲箭头
position: relative;
width:;
height:;
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:;
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:;
height:;
border: 25px solid #fff;
border-bottom-color:#abc;
position:relative;
}
#diamond2:after{
position: absolute;
content:"";
left:-25px;
top:25px;
width:;
height:;
border: 25px solid #fff;
border-top-color:#abc; }

接下来,我们对菱形进行变形,实现一个盾牌效果:

#diamond_Shield{
width:;
height:;
border:50px solid #fff;
border-bottom: 20px solid #abc;
position:relative;
}
#diamond_Shield:after{
position: absolute;
content:"";
top:20px;
left:-50px;
width:;
height:;
border:50px solid #fff;
border-top: 70px solid #abc;
}

接下来在菱形和梯形的基础上实现钻石形状:

#diamond3{
width:50px;
height:;
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:;
height:;
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:;
width:;
left:;
top:-35px;
border-bottom: 35px solid #abc;
border-left: 50px solid #fff;
border-right: 50px solid #fff;
}

在三角形的基础上,我们让其中一边成弧形,就形成一个扇形了:

#cone{
background-color: #fff;
width:;
height:;
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:;
width:;
top: -85px;
left:-18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #abc;
}

六边形可以用两个三角形和一个矩形拼成、八边形可以用两个梯形和一个矩形拼成,还有五角星可以用两个梯形加一个三角形通过旋转组合实现,这里就不演示了。

明天是七夕,最后我们实现一个心形吧,愿天下有情人终成眷属:

#heart{
width:;
height:;
position:relative;
}
#heart:before,#heart:after{
position: absolute;
content:"";
left:50px;
top:;
width: 50px;
height:80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after{
left:;
transform:rotate(45deg);
transform-origin:100% 100%;
}

(因为只是演示,所以以上样式均没加浏览器厂商前缀)

通过这些基本图形的实现,以后实现复杂图形就有一定的可能性了。

css实现基础几何图形的更多相关文章

  1. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. CSS 设计彻底研究(一)(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  5. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  6. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  7. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  8. 【CSS入门基础,有需要的看过来哦】心境,心静,不轻言放弃!---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  9. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

随机推荐

  1. php加速缓存Xcache的安装与配置

    安装环境:centos 6.5 32bit  php5.5.7 nginx1.6.0 [root@localhost opt]# wget http://xcache.lighttpd.net/pub ...

  2. 用css控制cellspacing、cellpadding

    用css控制cellspacing.cellpadding 发表于 2006 年 12 月 24 日 由 Silbo 在table中控制单元格之间的间距要用到cellspacing.cellpaddi ...

  3. WebService优点和缺点小结

    最近做的几个项目都用到了webservice,通过自己的实践和网上资料的汇总,现在做个小结:        当前WebService是一个热门话题.但是,WebService究竟是什么?,WebSer ...

  4. SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演

    这样的点分成三类 1 不含0,要求三个数的最大公约数为1 2 含一个0,两个非零数互质 3 含两个0,这样的数只有三个,可以讨论 针对 1情况 定义f[n]为所有满足三个数最大公约数为n的三元组数量 ...

  5. [摘]selenium-ide命令

    关于,selenium 命令这一部分,为了便于像我一样的菜鸟理解,我采用通过例子讲命令的方式. 菜鸟Selenium 命令通常被称为selenese,有一系列运行测试案例所需的命令构成. ----// ...

  6. SQL经典题

    1触发器的作用?    答:触发器是一中特殊的存储过程,主要是通过事件来触发而被执行的.它可以强化约束,来维护数据的完整性和一致性, 可以跟踪数据库内的操作从而不允许未经许可的更新和变化.可以联级运算 ...

  7. 完美atoi,哈哈

    /* atoi算法,要求完美版 有两种,一种是用longlong,一种是真用int “” " " “-” “+” “ -23” “ +23” “12a" "ab ...

  8. 【原创】Hadoop机架感知对性能调优的理解

    Hadoop作为大数据处理的典型平台,在海量数据处理过程中,其主要限制因素是节点之间的数据传输速率.因为集群的带宽有限,而有限的带宽资源却承担着大量的刚性带宽需求,例如Shuffle阶段的数据传输不可 ...

  9. HIVE中查询FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Communications link failure

    有一天早上到公司用hive中查询数据,发现报错不能连接.通过检查发现mysql服务器没有启动,开启mysql服务器后查询正常.

  10. glusterfs repo

    Installing Gluster For RPM based distributions, if you will be using InfiniBand, add the glusterfs R ...