盒模型之border实践--三角形_模型布线三角形处理-优快云博客

本文介绍了如何使用CSS的基本属性来实现各种有趣的图形效果，包括简单的蓝色正方形盒子、三角形及一个由多个元素组合而成的圣诞树图形。通过巧妙地设置边界样式、宽度、颜色等属性，可以不借助额外图片资源实现这些效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
<style type="text/css">
	div{
		width: 300px;
		height: 300px;
		background: blue;
		border: 50px dotted green;
		/*单独设置某个方向的边框*/
		border-top: 10px solid orange;
		/*也可以单独设置边框的三要素之一，如形色*/
		border-style: dashed;
	}
</style>
</head>
<body>
	<div>
		盒子的border 3要素 宽border-width 形状border-style 以及颜色border-color
	</div>
</body>
</html>

1.三角形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
<style type="text/css">

	#trip{

		width: 0px;
		height: 0px;
		border-top: 50px solid white ;
		border-right: 50px solid white;
		border-bottom: 50px solid white;
		border-left: 50px solid orange;
	}
</style>
</head>
<body>
	
	<div id="trip"></div>

</body>
</html>

2.圣诞树

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>圣诞树</title>
<style type="text/css">

	#trip1{

		width: 0px;
		height: 0px;
		border-top: 100px solid white ;
		border-right: 100px solid white;
		border-bottom: 100px solid green;
		border-left: 100px solid white;
		float: left;
		margin-left: 100px;
	}

	#trip2{
		width: 0px;
		height: 0px;
		border-top: 200px solid white;
		border-right: 200px solid white;
		border-bottom: 200px solid green;
		border-left: 200px solid white;
	}
	#trip3{
		width: 100px;
		height: 200px;
		background: gray;
		margin-left: 150px;
	}
</style>
</head>
<body>
	
	<div id="trip1"></div>
	<div id="trip2"></div>
	<div id="trip3"></div>
</body>
</html>