0
\$\begingroup\$

I've created a Christmas tree using only HTML and CSS. It's pretty sure that the code can be written in a more efficient way. Also, the lights are turning on and off at the same time, is there a way to make them work independently?

body {
  background-color: #9fd8ee;
}

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.triangle-one {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgb(20, 97, 27);
  margin-top: -69px;
}

.triangle-two {
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid rgb(20, 97, 27);
  margin-top: -40px;
}

.triangle-three {
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 200px solid rgb(20, 97, 27);
  margin-top: -80px;
}

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
}

.rectangle {
  height: 50px;
  width: 60px;
  background-color: maroon;
}

.globe {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  position: absolute;
}

.glpos-1 {
  background: red;
  top: 175px;
  left: 630px;
}

.glpos-2 {
  background: blue;
  top: 225px;
  left: 655px;
}

.glpos-3 {
  background: yellow;
  top: 315px;
  left: 610px;
}

.glpos-4 {
  background: orange;
  top: 375px;
  left: 680px;
}

.glpos-5 {
  background: cyan;
  top: 425px;
  left: 640px;
}

.glpos-6 {
  background: red;
  top: 535px;
  left: 700px;
}

.glpos-7 {
  background: blue;
  top: 510px;
  left: 590px;
}

.light {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: yellow;
  animation: example 1s infinite;
  position: absolute;
}

.lipos-1 {
  top: 260px;
  left: 620px;
}

.lipos-2 {
  top: 300px;
  left: 710px;
}

.lipos-3 {
  top: 410px;
  left: 590px;
}

.lipos-4 {
  top: 510px;
  left: 730px;
}

.lipos-5 {
  top: 160px;
  left: 666px;
}

.lipos-6 {
  top: 417px;
  left: 700px;
}

.lipos-7 {
  top: 480px;
  left: 610px;
}

@keyframes example {
  50% {
    box-shadow: 1px 1px 10px #ccc, -2px 1px 10px #ccc, 0 -1px 10px #ccc;
  }
}

.star {
  margin: 50px 0;
  position: relative;
  display: block;
  color: yellow;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid yellow;
  border-left: 100px solid transparent;
  transform: rotate(35deg) scale(0.75);
}
.star:before {
  border-bottom: 80px solid yellow;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
.star:after {
  position: absolute;
  display: block;
  color: yellow;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid yellow;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}
<!DOCTYPE html>
<html>
  <head>
    <title>Christmas tree</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="tree">
      <div class="star"></div>
      <div class="triangle-one"></div>
      <div class="triangle-two"></div>
      <div class="triangle-three"></div>
      <div class="triangle-four"></div>
      <div class="rectangle"></div>
    </div>
    <div class="globe glpos-1"></div>
    <div class="globe glpos-2"></div>
    <div class="globe glpos-3"></div>
    <div class="globe glpos-4"></div>
    <div class="globe glpos-5"></div>
    <div class="globe glpos-6"></div>
    <div class="globe glpos-7"></div>

    <div class="light lipos-1"></div>
    <div class="light lipos-2"></div>
    <div class="light lipos-3"></div>
    <div class="light lipos-4"></div>
    <div class="light lipos-5"></div>
    <div class="light lipos-6"></div>
    <div class="light lipos-7"></div>
  </body>
</html>

PS: it seems that in this code snippet the globes and lights are not positioned on the tree. I don't know why, I copied the code from my project where it looks right.

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

You could make a few adjustments to your code:

  • Positioning looks inconsistent here. Make sure to set your parent element's position to relative. An absolutely positioned element is positioned relative to its parent. If there is no such parent, it is positioned relative to the window, just like in your example.

  • Add z-index to make ornaments and lights appear in front of the tree.

  • clip-path is quite handy when it comes to creating shapes (Check for browser compatibility here).

Hope this helps!

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.