您的位置：首页 > Web前端 > CSS

休闲时光小代码----用CSS制作圣诞树

2017-03-08 09:40 169 查看

<!DOCTYPE html>

<html>

<head>
<title>CSS控制border制作圣诞树</title>
<meta charset="utf-8">
<style type="text/css">
#max{
margin-left: 256px;
}
#top{
height: 0px;
width: 0px;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid green;
margin-left: 40px;
}
#top1{
height: 0px;
width: 0px;
border-right: 80px solid transparent;
border-left: 80px solid transparent;
border-bottom: 80px solid green;
margin-left: 20px;

}
#top2{
height:0px;
width: 0px;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid green;
}
#top3{
height: 0px;
width: 0px;
border-top: 20px solid gray;
border-right: 20px solid gray;
border-left: 20px solid gray;
border-bottom: 80px solid gray;
margin-left: 80px;
}
</style>

</head>

<body>
<div id="max">
<div id="top"></div>
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航