`
lib
  • 浏览: 133535 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

使用CSS绘制基本图形

web前端CSS绘图
阅读更多

你懂得，不解释，直接上代码。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

	.wraper {
		position: relative;
		float: left;
		width: 150px;
		height: 150px;
		border: 1px solid black;
		padding: 10px;
		margin: 10px;
	}

	.wraper div {
		height: 0px;
	}

	.d1 {
		width: 1px;
		margin: 0 auto;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid;
		color: red;
	}

	.d2 {
		width: 50px;
		margin: 0 auto;
		border-bottom: 100px solid;
		color: orange;
	}

	.d3 {
		width: 50px;
		margin: 0 auto;
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		border-bottom: 100px solid;
		color: blue;
	}
	
	.d4 {
		width: 1px;
		margin: 0 auto;
		border-left: 50px solid transparent;
		border-bottom: 100px solid;
		color: green;
	}
	
	.d5 {
		width: 1px;
		margin: 0 auto;
		border-right: 50px solid transparent;
		border-bottom: 100px solid;
		color: gray;
	}

  </style>
 </head>

 <body>
  <div class="wraper">
	<div class="d1"></div>
  </div>
  <div class="wraper">
	<div class="d2"></div>
  </div>
  <div class="wraper">
	<div class="d3"></div>
  </div>
  <div class="wraper">
	<div class="d4"></div>
  </div>
  <div class="wraper">
	<div class="d5"></div>
  </div>
 </body>
</html>

 

显示的结果：

 

 

 

  • 大小: 3.2 KB
分享到：
| Canvas学习笔记(八)--样式
评论
2 楼 lib 2012-04-19  
BuN_Ny 写道
三角那个是怎么弄出来的


三角和梯形的实现，唯一区别就是width这个属性。
最简单、直接的方式就是给div加上background-color，你就会马上理解到其中的奥妙。
哈哈！快试一下吧！
1 楼 BuN_Ny 2012-04-19  
三角那个是怎么弄出来的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics