如何用CSS控制div画三角形，圣诞树
ttp://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="nofollow noopener">http://www.w3.org/TR/html4/loose.dtd">
三角练习<&><br><style><br />#tri{<br />width: 0px;<br />height: 0px;<br /> border-top: 0px solid white;<br /> border-right: 100px solid white;<br /> border-bottom: 400px solid green;<br /> border-left: 100px solid white;<br />}<br /></style><br /></head><br /><body><br /><div id="tri"></div><br /></body><br /></html><br />END<br />画圣诞树<br />【画两个三角】<br />用上面三角形的基础，先画出两个大小不同三角形。<br />#tri1{<br />width: 0px;<br />height: 0px;<br />border-top: 100px solid white;<br />border-right: 100px solid white;<br />border-bottom: 100px solid green;<br />border-left: 100px solid white;<br />}<br />#tri2{<br />width: 0px;<br />height: 0px;<br />border-top: 200px solid white;<br />border-right: 200px solid white;<br />border-bottom: 200px solid green;<br />border-left: 200px solid white; <br />}<br />【利用浮动以及margin调到合适位置】<br />将第一个小三角形浮动起来，这样就覆盖到第2个上面，然后利用margin值调动位置，最终显示出圣诞树的上面内容，代码如下，图如下。<br />#tri1{<br />width: 0px;<br />height: 0px;<br />border-top: 100px solid white;<br />border-right: 100px solid white;<br />border-bottom: 100px solid green;<br />border-left: 100px solid white;<br />float: left;<br />margin-left: 100px;<br />}<br />#tri2{<br />width: 0px;<br />height: 0px;<br />border-top: 200px solid white;<br />border-right: 200px solid white;<br />border-bottom: 200px solid green;<br />border-left: 200px solid white;<br />} <br />【画树干】<br />再加入一个div名字为footer，控制其大小形状与颜色，并用margin调整期位置。<br />#footer{<br />width: 100px;<br />height: 200px;<br />background: gray;<br />margin-left: 150px;<br />} <br />最终，经过调整得到一课圣诞树。如下图所示<br />完整代码如下，仅做参考<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="nofollow noopener">http://www.w3.org/TR/html4/loose.dtd"><br /><html lang="en"><br /><head><br /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><br /><title>圣诞树练习</title><br /><style><br />#header{<br />width: 0px;<br />height: 0px;<br />border-top: 100px solid white;<br />border-right: 100px solid white;<br />border-bottom: 100px solid green;<br />border-left: 100px solid white;<br />float: left;<br />margin-left: 100px;<br />}<br />#main{<br />width: 0px;<br />height: 0px;<br />border-top: 200px solid white;<br />border-right: 200px solid white;<br />border-bottom: 200px solid green;<br />border-left: 200px solid white;<br />}<br />#footer{<br />width: 100px;<br />height: 200px;<br />background: gray;<br />margin-left: 150px;<br />}<br /></style><br /></head><br /><body><br /><div id="header"></div><br /><div id="main"></div><br /><div id="footer"></div><br /></body><br /></html></style></&>
