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

今天带来的是用纯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、上三角使用CSS展示各种形状的三角形

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

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

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

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

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

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

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

5、左上三角使用CSS展示各种形状的三角形

<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、右上三角使用CSS展示各种形状的三角形

<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、左下三角使用CSS展示各种形状的三角形

<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、右下三角使用CSS展示各种形状的三角形

<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>

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

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

相关推荐