用CSS3绘制图形

时间:2022-08-27 09:19:55
参考资料:http://blog.csdn.net/fense_520/article/details/37892507

本文非转载,为个人原创,转载请先联系博主,谢谢~

准备:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>- UED - </title>
<style type="text/css" src="css/style.css"></style>
<script type="text/javascript" src="js/ext.js"></script>
</head> <div class="xxx"></div>

xxx按需更改

div { background:black;}

好,我们开始画图吧!

1. 矩形

.rectangle { width:100px; height:100px;}

2. 圆形

.circle { width:100px; height:100px; border-radius:50px;}
用CSS3绘制图形
图 1
3. 圆柱形
.cylinder {width:100px; height:100px; border-radius:100px/50px;}
用CSS3绘制图形用CSS3绘制图形用CSS3绘制图形
图 2-1 图2-2 图2-3
橙色为border-radius:100px/50px时的情况,紫色为border-radius:50px/100px的情况,值分别是水平半径和垂直半径,在正方形内圈出了一个圆柱形,可以发现,border-radius总保持它的圆心在中心了。为什么不会是图2-2的样子呢<待解决1>?当我们设置border-radius:100px/100px的时候,你会惊奇地发现,它又变回一个圆形了,你会以为它是图2-3的样子的,但实际上不是,它跟图1的圆形一样大小,这又是为什么呢<待解决2>?
4. 椭圆形
.oval {width:200px; height:100px; border-radius:100px/50px;}

跟圆柱形差不多,把正方形的宽扩张到200px,它正好容纳了那个椭圆,椭圆就是画出来的椭圆啦!

5. 三角形
[class^=triangle-] { width:0px; height:0px;}

先以上三角形为例:

.triangle-up { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}

这个三角形是怎么来的呢?我细细研究了一下,发现border之间有一条分界,而这条分界是45度倾斜的,如图-3,两border间有明显分界,这就是我们画三角形所要利用到的原理,上面已经设置width和height为0,这时两border交汇处就有一个由两个三角形组成的矩形啦,设置其中一个border为透明,就剩下一个三角形了。对,就是这么简单,那这个上三角形该怎么画?设置左右border和border-bottom,让左右border变透明,这时你们看到的上三角形其实是由两个三角形组成的,如图-4。其他种类的三角形类似,你看着哪几个border能组成这个三角形顺便调整一下border-width就行了。曾经有一道笔试题——画出一条丝带,现在想想挺简单的,不就是一个黄色左三角形+黄色矩形+白色左三角形定位做成的嘛,如下:

div { float:left;}
#test { border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid yellow;}
#test2 { width:800px; height:200px; background:yellow;}
#test3 { border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid white; margin-left:-100px;}
用CSS3绘制图形
图-3

用CSS3绘制图形
图-4
6. 平行四边形——现成的属性——transform:skew(20deg) 左倾斜的意思
7. 梯形
其实跟上面说的上三角形一个道理,不过设置它的width为100px,height为0,也就是两个三角形加一个width为100px,height为border-bottom宽度的矩形画成的。
8.六角星
.star-six { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; position:relative;}
.star-six:after { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red; position:absolute; content:""; top:30px; left:-50px;}
第一行:建立一个上三角形,粉色部分(中间被遮挡了),position为relative。
第二行:伪类的位置为absolute,因star-six类的宽高均为0,伪类的起始位置在图-5所示的圆圈中,要明白一个原理,若star-six宽高不为0,伪类块是在star-six内部的,因为分别设置了position为relative和absolute,这时两三角形组成了个平行四边形,这也算是画平行四边形的一种方法吧。当我尝试去掉position:absolute,发现伪类元素只剩下左边的一半了,而且位于star-six元素的右上方,这是为什么<待解决3>?(before是在后面,而after是在前面的?真奇怪) 答:看走眼了,:after确实是在后面了。
接下来就是定位了top:30px; left:-50px; 将原三角形移动到绿色三角形所示位置,这时他们组成了一个六角形。
其他:content:"",这个一定要有,若没有就是normal了,网上看到有篇文章写到”content:normal将 :before 和 :after 伪元素计算成‘none’”,而content:none的伪元素是不会被生成的,关于content属性,我也不太懂,各位自行查找资料。
用CSS3绘制图形
图-5
9. 五角星
.star-five { margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red;
-webkit-transform:rotate(35deg);
-moz-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg); }
.star-five:before { border-bottom:80px solid orange; border-left:30px solid transparent; border-right:30px solid transparent; position:absolute; height:0; width:0; top:-45px; left:-65px; display:block; content:'';
-webkit-transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg); }
.star-five:after { border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid transparent; position:absolute; display:block; color:red; top:3px; left:-105px; width:0px; height:0px; content:'';
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg); }

使用前面的提到的方法,分别绘制三角形再旋转和定位而成,代码所示,:before伪类元素画出的是五角星顶部的小三角形,我们也可以把:before画成跟star-five和:after一样大小的三角形再旋转定位。

10. 五角大楼(或者说是五边形)——由两个梯形组成(或者你用各种奇形怪状拼凑),没什么好说的了。
11. 六边形 = 上三角形 + 矩形 + 下三角形
12. 八边形 = 上梯形 + 矩形 + 下梯形
13. 爱心 = 两个拥有两圆角的矩形,如图-6,(transform-oritin定义旋转的基准点,对rotate属性起作用)
用CSS3绘制图形
图-6
14. 无穷符号 = 两个矩形(分别拥有3个圆角和一个直角)
15. 鸡蛋 =  一个带圆角的矩形
16. 药丸
.pill { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid red; border-radius:60px;}
用CSS3绘制图形
图-7
这个我也不知道是怎么形成的,照理说,它只有上边、下边和右边的相交部分,border-xxx-left应该没作用才是,但他又确实起作用了,对这个变化有点纳闷,如图-7后两步<待解决4>。
17. 对话框 = 圆角矩形 + 左三角形
18. 钻石 = 梯形 + 下三角形


我觉得用css3画图形在实际应用中没什么大的用处,纯属用来练手好了(或许还可以应付几道笔试题呢)。

最后,谢谢你认真看完了,不足之处,欢迎指出!顺便帮我解答几个待解决问题。


完整代码:
div { background:black;}
/*矩形*/
.rectangle { width:100px; height:100px;}
/*圆形*/
.circle { width:100px; height:100px; border-radius:50px;}
/*图柱形*/
.cylinder {width:100px; height:100px; border-radius:100px/50px;}
/*椭圆形*/
.oval {width:200px; height:100px; border-radius:100px/50px;} /*各种三角形*/
[class^=triangle-] { width:0px; height:0px;}
.triangle-up { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}
.triangle-down { border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;}
.triangle-equal { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid red;}
.triangle-left { border-top:50px solid transparent; border-right:100px solid red; border-bottom:50px solid transparent;}
.triangle-right { border-top:50px solid transparent; border-left:100px solid red; border-bottom:50px solid transparent;}
.triangle-left-up { border-top:100px solid red; border-right:200px solid transparent;}
.triangle-right-up { border-top:100px solid red; border-left:200px solid transparent;}
.triangle-left-down { border-bottom:100px solid red; border-right:200px solid transparent;}
.triangle-right-down { border-bottom:100px solid red; border-left:200px solid transparent;} /*平行四边形*/
.parallelogram { width:150px; height:100px; margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg); }
/*梯形*/
.trapezoid { width:100px; height:0px; border-bottom:100px solid red; border-left:50px solid transparent; border-right:50px solid transparent;}
/*六角星*/
.star-six { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; position:relative;}
.star-six:after { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red; position:absolute; content:""; top:30px; left:-50px;}
/*五角星*/
.star-five { margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red;
-webkit-transform:rotate(35deg);
-moz-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg); }
.star-five:before { border-bottom:80px solid orange; border-left:30px solid transparent; border-right:30px solid transparent; position:absolute; height:0; width:0; top:-45px; left:-65px; display:block; content:'';
-webkit-transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg); }
.star-five:after { border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid transparent; position:absolute; display:block; color:red; top:3px; left:-105px; width:0px; height:0px; content:'';
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg); }
/*五角大楼*/
.pentagon { position:relative; width:54px; border-width:50px 18px 0; border-style:solid; border-color:red transparent;}
.pentagon:before { content:""; position:absolute; height:0; width:0; top:-85px; left:-18px; border-width:0 45px 35px; border-style:solid; border-color:transparent transparent red;}
/*六边形*/
.hexagon { width:100px; height:55px; background:red; position:relative;}
.hexagon:before { content:""; position:absolute; top:-25px; left:0; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:25px solid red;}
.hexagon:after { content:""; position:absolute; bottom:-25px; left:0; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:25px solid red;}
/*八边形*/
.octagon { width:100px; height:100px; background:red; position:relative;}
.octagon:before { content:""; position:absolute; top:0; left:0; border-bottom:29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px; height:0;}
.octagon:after { content:""; position:absolute; bottom:0; left:0; border-top:29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px; height:0;}
/*爱心*/
.heart { position:relative; width:100px; height:90px;}
.heart:before { position:absolute; content:""; left:50px; top:0; width:50px; height:80px; background:red;
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%; }
.heart:after { left:0; content:""; position:absolute; width:50px; height:80px;
background:red;
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin :100% 100%; }
/*无穷大符号*/
.infinity { position:relative; width:212px; height:100px; }
.infinity:before { width:60px; height:60px; border:20px solid red; content:""; position:absolute;
-moz-border-radius:50px 50px 0 50px;
border-radius:50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.infinity:after { right:auto; width:60px; height:60px; border:20px solid red; content:""; position:absolute;
-moz-border-radius:50px 50px 50px 0;
border-radius:50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
/*鸡蛋*/
.egg { width:126px; height:180px; background-color:red;
-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
/*药丸*/
.pill { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid red;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px; }
/*对话框*/
.talkbubble { width:120px; height:80px; background:red; position:relative;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;}
.talkbubble:before { content:""; position:absolute; right:100%; top:26px; width:0; height:0; border-top:13px solid transparent; border-right:26px solid red; border-bottom:13px solid transparent;}
/*钻石*/
.cut-diamond { border-style:solid; border-color:transparent transparent red transparent; border-width:0 25px 25px 25px; height:0; width:50px; position:relative; margin:20px 0 50px 0;}
.cut-diamond:after { content:""; position:absolute; top:25px; left:-25px; width:0; height:0; border-style:solid; border-color:red transparent transparent transparent; border-width:70px 50px 0 50px;}

用CSS3绘制图形的更多相关文章

  1. css3 绘制图形

    星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...

  2. CSS图形基础:纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  3. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  4. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  5. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">&lt ...

  8. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"&gt ...

  9. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

随机推荐

  1. Winform 中DataGridView控件添加行标题

    有很多种方法. 1.可以在DataGridView控件中的RowStateChanged事件改变行标题单元格的值(Row.HeaderCell.Value) /// <summary> / ...

  2. Spring MVC Web框架

      1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...

  3. CCS 5 XDS100 仿真连接错误Error connecting to the target【瓦特芯笔记】

      问题现象:在点击仿真是出现连接错误: Error connecting to the target: (Error -151 @ 0x0) One of the FTDI driver funct ...

  4. PHP写入文件用file&lowbar;put&lowbar;contents代替fwrite优点多多&lpar;转&rpar;

    使用php有一段时间了,之前一直用fwrite写入文件,不过当我知道file_put_contents这个函数之后,fwrite就比较少用了,file_put_contents比fwrite代码更简洁 ...

  5. hdu 1166 敌兵布阵&lpar;线段树,树状数组&rpar;

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 直接线段树模板 AC代码: #include<iostream> #include<cs ...

  6. hadoop 读取文件的两种方式

    1.操作javaAPI方式 static{ URL.setURLStreamHandlerFactory(new FsUrlStreamHandlerFactory()); } public stat ...

  7. JXLS 2&period;4&period;0系列教程(四)——多sheet是怎么做到的

    注:本文代码在第一篇文章基础上修改而成,请务必先阅读第一篇文章. http://www.cnblogs.com/foxlee1024/p/7616987.html 本文也不会过多的讲解模板中遍历表达式 ...

  8. 关于springMVC中component-scan的问题以及springmvc&period;xml整理

    关于springMVC中component-scan的问题以及springmvc.xml整理 一.component-scan问题和解决办法         最近在学习使用springMVC+myba ...

  9. HDOJ 6508 Problem I&period; Spell Boost (01背包&sol;DP)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6508 题目: Problem Description Shadowverse is a funny car ...

  10. Android测试(三)——APK文件反编译

    APK文件反编译: 在进行反编译操作前,先简单介绍下smali文件: smali是一种文件格式,语法和Jasmine的语言类似,这些smali文件包含开发应用程序时编写的java类的代码. 工具:ja ...