CSS控制border畫一棵小樹

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	#container{
		width: 300px;
		background: gray;
	}

	#trip1{
		width: 00px;
		margin-left: 20px;

		border-right-width: 100px;
		border-right-style: solid;
		border-right-color: gray;

		border-bottom-width: 100px;
		border-bottom-style: solid;
		border-bottom-color: green;

		border-left-width: 100px;
		border-left-style: solid;
		border-left-color: gray;
	}

	#trip2{
		width: 00px;

		border-right-width: 120px;
		border-right-style: solid;
		border-right-color: gray;

		border-bottom-width: 120px;
		border-bottom-style: solid;
		border-bottom-color: green;

		border-left-width: 120px;
		border-left-style: solid;
		border-left-color: gray;
	}

	#tang{
		background: brown;
		width: 40px;
		height: 150px;
		margin-left: 100px;
	}
</style>
</head>
<body>
<div id="container">
	<div id="trip1"></div>
	<div id="trip2"></div>
	<div id="tang"></div>
</div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章