css布局一个圣诞树效果代码-html代码-BFW代码库

css布局一个圣诞树效果代码

代码语言：html

代码描述：css布局一个圣诞树效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.tree {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 5px;
}
.tree .branches-top {
  width: 0px;
  border-bottom: 120px solid #44B859;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  margin: 0 auto;
}
.tree .branches-top .ornament-1 {
  position: relative;
  top: 130px;
  left: -20px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches-top .ornament-2 {
  position: relative;
  top: 110px;
  left: 27px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches-top .star {
      /*
shout-out to CSS-Tricks for the article: https://css-tricks.com/the-shapes-of-css/
      */
  margin: 0 auto;
  border-right: 60px solid transparent;
  /.........完整代码请登录后点击上方下载按钮下载查看