用CSS绘制各种角度的三角形

下面是一些利用CSS中border的特性绘制的各种角度的三角形:

(1)正方形

正方形

图1:正方形

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-left: 50px solid gray;
		border-right : 50px solid green;
		border-bottom: 50px solid red;
		border-top : 50px solid yellow;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

如上图1,由于设置了width、height都为0了,所以四个点也就归并成了一个点,后面的各种角度的三角形,其实也就是不断调整那个中心点而已。

(2)向上三角

向上三角

图2:向上三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right : 50px solid transparent;
		border-bottom: 100px solid red;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(3)向下三角

向下三角

图3:向下三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right : 50px solid transparent;
		border-top: 100px solid red;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(4)向左三角

向左三角

图4:向左三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-right: 100px solid red;
		border-top : 50px solid transparent;
		border-bottom: 50px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(5)向右三角

向右三角

图5:向右三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-left: 100px solid red;
		border-top : 50px solid transparent;
		border-bottom: 50px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(6)左上三角

左上三角

图6:左上三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-top : 100px solid red;
		border-right: 100px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(7)右上三角

右上三角

图7:右上三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-top : 100px solid red;
		border-left: 100px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(8)左下三角

左下三角

图8:左下三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-bottom : 100px solid red;
		border-right: 100px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(9)右下三角

右下三角

图9:右下三角

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#triangle {
		width : 0;
		height: 0;
		border-bottom : 100px solid red;
		border-left: 100px solid transparent;
	}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>


本文标题:用CSS绘制各种角度的三角形

本文链接:http://yedward.net/?id=358

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章