Css画圣诞树 - 爱码网

今天看到一道有趣的css题，要求用html和css实现一个圣诞树（上面一个小三角，下面一个大三角，最下面是一个矩形）？

你看到后脑子中的印象是什么呢，三角形的做法，还是什么，接下来看看我的制作过程。

<!DOCTYPE html>

<html>

<head>

<title>TODO supply a title</title>

margin: 0;

padding: 0;

}

#div1{

width: 500px;

height: 500px;

border: 5px #000 solid;

margin: 0 auto;

text-align: center;

}

h1{

color: #33ff33;

margin-top: 10px;

}

h2{

width: 0;

height:0;

border-top:60px #fff solid;

border-right:70px #fff solid;

border-bottom:70px #3333ff solid;

border-left:70px #fff solid;

position:relative;

left:180px;

}

h3{

width: 0;

height:0;

border-top:100px #fff solid;

border-right:100px #fff solid;

border-bottom:100px #3333ff solid;

border-left:100px #fff solid;

margin-left: 150px;

margin-top: -100px;

}

width: 10px;

height:180px;

margin:0 auto;

background: red;

clear: both; /*不加清除浮动就会在h3下边显示*/

}

</style>

</head>

<body>

<div >

<h1>圣诞树制作</h1>

<p></p>

</div>

</body>

</html>

效果如下：

Css画圣诞树