使用CSS展示各种形状的三角形

Java_1010

浏览: 8742 次
性别:
来自: 北京

最近访客更多访客>>

ljl961890233bear

nj_first

109

kamhung

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

今天带来的是用纯css样式来绘制三角形。直接进入代码：

先来解释几个样式：

solid：表示线条为实线。常用的线条有：dotted(点线)、dashed(虚线）

transparent：表示线条为透明。

先来看下代码的基本结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三角展示</title>
		<style></style>		
	</head>
	<body>
		<div id="div1"></div>		
	</body>
</html>

很简单的一段代码，只有一个div标签，id为div1。

1、上三角

<style>
	#div1 {
	        width:0px;
		height:0px;
		border-right:30px solid transparent;
		border-bottom:30px solid red;
		border-left:30px solid transparent;
	}
</style>

2、下三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid transparent;
		border-left:30px solid transparent;
	}
</style>

3、左三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-bottom:30px solid transparent;
		border-left:30px solid red;
	}
</style>

4、右三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid red;
		border-bottom:30px solid transparent;
	}
</style>

5、左上三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid transparent;
		border-bottom:30px solid transparent;
		border-left:30px solid red;
	}
</style>

6、右上三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid red;
		border-bottom:30px solid transparent;
		border-left:30px solid transparent;
	}
</style>

7、左下三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid transparent;
		border-bottom:30px solid red;
		border-left:30px solid red;
	}
</style>

8、右下三角

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid red;
		border-bottom:30px solid red;
		border-left:30px solid transparent;
	}
</style>

三角形的绘制到此结束，有没有觉得很好玩呢？