先是用CSS控制div画一个三角形。
各个边框的连接处是斜的，如图所示：
所以，如果图中若没有中间的白色方框（即div长宽为0）则很容易通过控制边框来绘制三角形，通过设置每个变得长度可以改变三角形的角度大小。
比如：
<style>
div {
height: 0px;
width: 0px;
border-top: solid red 0px;
border-right: solid black 50px;
border-bottom: solid green 100px;
border-left: solid yellow 50px;
}
</style>
上方css效果
会了这一些，圣诞树就不会很难了。
Christmas Tree
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS控制div边框画圣诞树</title>
<style>
/*#tri {
height: 0px;
width: 0px;
border-top: solid red 0px;
border-right: solid black 50px;
border-bottom: solid green 100px;
border-left: solid yellow 50px;
}*/
div {
margin-left: auto;
margin-right: auto;
}
#contain {
background: yellow;
}
#l1 {
height: 0px;
width: 0px;
border-top: 0px;
border-right: solid transparent 100px;
border-bottom: solid green 100px;
border-left: solid transparent 100px;
}
#l2 {
height: 0px;
width: 0px;
border-top: 0px;
border-right: solid transparent 150px;
border-bottom: solid green 150px;
border-left: solid transparent 150px;
}
#l3{
height: 200px;
width: 100px;
background: brown;
}
</style>
</head>
<body>
<!-- <div id="tri"></div> -->
<div id="contain">
<div id="l1"> </div>
<div id="l2"> </div>
<div id="l3"> </div>
</div>
</body>
</html>
网友评论