利用css样式画各种图形--初步、进阶、高级（一）

转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。

下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复杂的css画图形。

其中用了css3.0的一些属性，所以这里声明：请用支持css3.0的浏览器看此文章！

正方形

矩形

梯形

平行四边形

上面这几个相对比较简单,没什么可解释的,看下面源码：

/*正方形*/ .Square { width: 100px; height: 100px; background: #669; } /*矩形*/ .rectangle { width: 200px; height: 100px; background: #669; } /*梯形*/ .trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } /*平行四边形*/ .parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }

向上三角

向下三角

向左三角

向右三角

左上三角

右上三角

左下上三角

右下上三角

上下三角

上面这些三角，其实也很常见，主要原理是利用了相邻两个边框的接壤处分配原则，如果没有宽度和高度的话，其实应该是四个三角形接成的矩形，下面是上面图形的源码：

/*三角形*/ .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; } .triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669; } .triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #669; border-bottom: 50px solid transparent; } .triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #669; border-bottom: 50px solid transparent; } .triangle-updown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669;position:relative;margin-bottom:50px} .triangle-updown:after {content:" "; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669;position:absolute;top:50px;left:-50px;}  .triangle-topleft { width: 0; height: 0; border-top: 100px solid #669; border-right: 100px solid transparent; } .triangle-topright { width: 0; height: 0; border-top: 100px solid #669; border-left: 100px solid transparent; } .triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #669; border-right: 100px solid transparent; } .triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #669; border-left: 100px solid transparent; }

看下面例子，清楚的标明了，四个边的情况，上面的三角形都是利用了这个原理，让不想显示的边框透明transparent：

<div style="border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;width:0px;height:0px;"></div>

圆形

同心圆形

上半圆形

下半圆形

左半圆形

右半圆形

左上四分之一圆形

右上四分之一圆形

右下四分之一圆形

左下四分之一圆形

其实这个跟上面画三角形的原理很相似，都是利用相邻边框接壤的配原则。另还主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果！结合border-width调整，可以得到不同的图形。

当然适当的调整角度和组合，可以得到更多的图形。

/*圆形 主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果*/ .circle { width: 100px; height: 100px; background: #669; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } .circle-circle { width: 100px; height: 100px; border:20px solid #669;background: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }  .circle-up { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;border-right:100px solid #669;  -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; } .circle-down { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-right:100px solid #669;  -moz-border-radius:0 0 100px 100px; -webkit-border-radius:0 0 100px 100px; border-radius:0 0 100px 100px; } .circle-left { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669;  -moz-border-radius:100px 0 0 100px; -webkit-border-radius:100px 0 0 100px; border-radius:100px 0 0 100px; } .circle-right { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669;  -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:0 100px 100px 0; }  .circle-lefttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;  -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:100px 0 0 0; } .circle-righttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;  -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; border-radius:0 100px 0 0; } .circle-rightbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;  -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; border-radius:0 0 100px 0; } .circle-leftbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;  -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; border-radius:0 0 0 100px; }

下面是适当的调整边框宽度和圆角得到的效果：

左上小尾巴

右上小尾巴

右下小尾巴

左下小尾巴

/*适当的调整边框宽度和圆角得到的效果*/ .tail-lefttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:100px 0 0 0;-webkit-border-radius:100px 0 0 0;border-radius:100px 0 0 0;width:100px;height:100px;} .tail-righttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:0 100px 0 0;-webkit-border-radius:0 100px 0 0;border-radius:0 100px 0 0;width:100px;height:100px;} .tail-rightbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 100px 0;-webkit-border-radius:0 0 100px 0;border-radius:0 0 100px 0;width:100px;height:100px;;} .tail-leftbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 100px;-webkit-border-radius:0 0 0 100px;border-radius:0 0 0 100px;width:100px;height:100px;}

当然可以通过上面延伸画出更多的效果比如：提示泡

先看效果：

提示泡

.pop{width:200px;height:100px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background:#669;margin-top:20px;position:relative} .pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px; border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;}

上面是css实现代码，基本原理又多了一项，就是利用了:after伪类，小尾巴上面已经介绍过了，这里又利用了一个css3.0的属性transform:rotate旋转了一个角度，

同时还实现了另外的一个图形--圆角矩形，这是最基本radius的用法，没什么可讲的。当然这里也可以延伸出另一个伪类:before画出第二个小尾巴，当然也不仅限于

小尾巴，上面的圆角矩形也可以换成椭圆。

下面给出实现代码：

.oval-pop{width: 200px; height: 100px; background: #669; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;  margin-bottom:50px;position:relative} .oval-pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px; border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);  -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;left:20px}

效果如下：

椭圆提示泡

同时，也给出了椭圆的实现代码。其中 border-radius: 100px / 50px; 中有一个“/” 这个符号是很少出现在css样式中的。

因为，圆角有水平方向也有垂直方向，所以"/"前面代表水平方向，后面代表垂直方向。

于是我们又多了一个属性，又多了一个发挥的方向。突然间我们发现css画图形其实就是对属性的组合创造。多试几次，相信每个人都很好的掌握这个技能！

下面再看一个属性，其实是对上面讲过的属性的一个扩展。

可以说是画圆的扩展也可以说是对圆角矩形的扩展---胶囊形：

胶囊

胶囊

半个胶囊

倾斜半个胶囊

倾斜半个胶囊

倾斜半个胶囊

下面是实现代码，基本属性上面我们都利用过，只是稍做调整：

.capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:200px;height:70px;background:#669;} .v-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:80px;height:200px;background:#669} .up-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px; background:#669;} .r45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px; background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-left:20px;} .l45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px; background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);margin-left:20px;} .lr45-capsule{width:160px;height:130px;position:relative} .lr45-capsule:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;} .lr45-capsule:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg); position:absolute;left:160px;top:00px;}

细观察一下最后两个图形如果合在一起好像能组成一个心形，其实就是一个心形：

心形

.heart{width:160px;height:200px;position:relative} .heart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;} .heart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg); position:absolute;left:48px;top:0px;}

上面讲的只是对css画图形的初步认识，基本上所有的实现都是对边框的角度的调整及组合。下节将会画些复杂的图形。

时间： 2024-10-24 12:56:11

利用css样式画各种图形--初步、进阶、高级（一）的相关文章

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值

反爬虫破解系列-汽车之家利用css样式替换文字破解方法

网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替的文.这样不会影响正常用户的阅读,只是在用鼠标选择的时候是选不到被替换的文字的,对爬虫则会造成采集内容不全的影响. 原理分析: 先看一下span标签的样式截图是火狐浏览器的firebug的html面板.我们可以看到正文中每个span标签的样式都是一个文字,我们只需要找到每个 span标签的cla

css 样式用法的累积

我们直接看例子然后在来解释用法. <!DOCTYPE html> <html> <head> <style> input[type="checkbox"]+p:before{ content:"台词:"; } </style> </head> <body> <input type="checkbox"/><p>我是唐老鸭.</p>

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

利用CSS进行表单样式定义

我们在表单使用过程中,常常需要控制表单样式,如表单控件长度,显示样式,提醒背景色,甚至整个表单的字体和统一样式等. 这些其实都可以通过CSS来实现,使我们的表单看起来更漂亮,1.利用DIV控制输入控件长度: 如上图,表单姓名和出生日期字段看起来长短不一,并且太长,不美观,我们可以通过DIV的CSS样式进行调整. 上面的样式,我们可以通过在字段上加入DIV标签,并且设置DIV的样式,如长度150px,显示方式为同一行显示display: inline; 这样就实现了控件统一长度的效果: 2.

CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,用的是firefox或者chrome,当然IE也能看一部分 1.正方形 div{ background:#F00; width:100px; height:100px; } 2.长方形 div{ background:#F00; width:200px; height:100px; } 3.圆形 div{ width: 100px; height: 100px; background: red; -moz-border-radius: 5

使用CSS 3创建不规则图形文字围绕

前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常见不规则复杂图形了(点击链接查看),如下图所示: 使用CSS创建的图形,无法内置文字或实现文字环绕效果.因此,如何实现不规则图形和文字复杂布局也成为了一个热议话题. 今天我们就来介绍一下如何实现这个效果.文章中我们将阐述如何使用 CSS创建不规则图形,实现不规则的文本布局.学会如何创建不规则图形之后

简单谈谈自己对htm与css中画圆的理解。

近几天,在利用css编辑中,发现不少边框图像要求是矩形圆角或者直接画一个圆的例子,下面和大家一起分享下对画圆的看法. 在这次的分享中,我侧重给大家看一些例子来更好的理解, 我们都明白,画圆时要用到“border-radius:”,而且在每次画圆时,我们都应该先设定一个width和height. 那么我们可以这样理解, 我们的圆是在一个矩形(正方形)中进行裁剪的,而border-radius就是我们要裁剪的尺寸. 给大家一些图片,更好的去理解. 首先,我们设定一个width为100px,高度为10

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS