1. 程式人生 > 其它 >css畫三角形和梯形

css畫三角形和梯形

我們的思路是使用border邊框來實現三角形的樣式,因為border的邊框是由四個三角形組成的。

設定一個盒子模型

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sanjiaoxing {
				width: 40px;
				height: 40px;
				border-width: 40px;
				border-style
: solid; border-color: red green blue brown; }
</style> </head> <body> <div id="sanjiaoxing"> </div> </body> </html>

在這裡插入圖片描述

開始設定三角形

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>
</title> <style type="text/css"> #sanjiaoxing { width: 0px;/*將div的width和height設定為0*/ height: 0px; border-width: 40px; border-style: solid; border-color: red transparent transparent transparent;/*使用transparent隱藏其他邊*/ } </style> </head> <body>
<div id="sanjiaoxing"> </div> </body> </html>

在這裡插入圖片描述

開始設定梯形

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tixing {
				width: 20px;
				height: 20px;
				border-width: 20px;
				border-style: solid;
				border-color: red transparent transparent transparent;
			}
		</style>
	</head>

	<body>
		<div id="tixing">

		</div>
	</body>

</html>

在這裡插入圖片描述