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;
  /*100%*/
  border-left: 60px solid transparent;
  /*100%*/
  border-bottom: 42px solid #FFD700;
  /*70%*/
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  position: relative;
  left: -57.5px;
  top: 20px;
}
.tree .branches-top .star:before {
  border-bottom: 48px solid #FFD700;
  /*80%*/
  border-left: 18px solid transparent;
  /*30%*/
  border-right: 18px solid transparent;
  /*30%*/
  position: absolute;
  top: -27px;
  /*45%*/
  left: -39px;
  /*65%*/
  display: block;
  content: "";
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}
.tree .branches-top .star:after {
  position: absolute;
  left: -63px;
  /*-105%*/
  border-right: 60px solid transparent;
  /*100%*/
  border-left: 60px solid transparent;
  /*100%*/
  border-bottom: 42px solid #FFD700;
  /*70%*/
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  content: "";
}
.tree .branches-mid {
  width: 150px;
  border-bottom: 100px solid #44B859;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  margin: 0 auto;
  margin-top: -40px;
}
.tree .branches-mid .ornament-3 {
  position: relative;
  top: 70px;
  left: -15px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches-mid .ornament-4 {
  position: relative;
  top: 80px;
  left: 90px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches-mid .ornament-5 {
  position: relative;
  top: 55px;
  left: 30.5px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches-mid .ornament-6 {
  position: relative;
  top: 40px;
  left: 125px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #ED001D;
}
.tree .branches {
  width: 200px;
  border-bottom: 1.........完整代码请登录后点击上方下载按钮下载查看