用CSS3绘制图形
参考资料: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;}
.cylinder {width:100px; height:100px; border-radius:100px/50px;}
.oval {width:200px; height:100px; border-radius:100px/50px;}
跟圆柱形差不多,把正方形的宽扩张到200px,它正好容纳了那个椭圆,椭圆就是画出来的椭圆啦!
[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;}
.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); }
使用前面的提到的方法,分别绘制三角形再旋转和定位而成,代码所示,:before伪类元素画出的是五角星顶部的小三角形,我们也可以把:before画成跟star-five和:after一样大小的三角形再旋转定位。
.pill { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid red; border-radius:60px;}
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绘制图形的更多相关文章
- css3 绘制图形
星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
随机推荐
- jQuery基础---Ajax基础教程(二)
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- Android开发环境的搭建之(二)Android Studio的安装
(1) 下载AS(android studio)1.3.2并安装android-studio-bundle-141.2178183-windows.exe.下载官方链接http://www.andr ...
- Git 和 SVN之间的五个基本区别
GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果你是一个具有使用SVN背景的人,你需要做一定的思想转换,来适应GIT提供的一些概念和特征.所以,这篇文章的主要目的就是 ...
- sql 聚合函数用法,及执行顺序
聚合函数无法用在where子句中 , 聚合函数包括count avg sum min max 子句执行顺序from -> where -> group by -> having -& ...
- 二.ubuntu14.04 3D特效设置
一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ub ...
- Ubuntu root登陆
分两步: 1.激活root 输入命令:sudo passwd,键入当前用户密码之后,为系统设置root密码:交互如下: jack@ubuntu:~$ sudo passwd[sudo] passwor ...
- Github上的优秀安卓项目
http://www.cnblogs.com/hawkon/p/3593709.html
- C++vptr初始化时间
给出如下代码段: #include <iostream> #include "stdio.h" using namespace std; class A { publi ...
- mit java open course assignment #2
package come; public class Marothon { public static void FirstName(String[] args1,int[] args2){ int ...
- AndroidUI 布局动画-为布局添加动画
除了可以为视图添加动画以外,还可以为视图的布局添加动画: <RelativeLayout xmlns:android="http://schemas.android.com/apk/r ...