Connect with us!

Triforce Zelda using HTML5 and CSS3 tutorial for beginners using VS Code Editor

In the retro game Legend of Zelda the Triforce also know as golden power is used as a sacred golden relic left behind by golden goddesses. Goddess intent to protect the world. The three triangles of the Triforce is made up of the Triforce of Power, the Triforce of Wisdom and the Triforce of Courage.

In this tutorial we will see how to create a Triforce symbol using HTML and CSS

Below is the class code of the triforce

.triforce {
  margin: 50px;
  content: "";
  position: relative;
  width: 0px;
  height: 0px;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
}
.triforce:before {
  content: "";
  position: absolute;
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
  top: 104px;
  left: -120px;
}
.triforce:after {
  content: "";
  position: absolute;
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
  top: 104px;
}

Here is the output:

Triforce

You can find the complete coding tutorial in the following YouTube Video

Here is the complete HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .triforce {
  margin: 50px;
  content: "";
  position: relative;
  width: 0px;
  height: 0px;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
}
.triforce:before {
  content: "";
  position: absolute;
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
  top: 104px;
  left: -120px;
}
.triforce:after {
  content: "";
  position: absolute;
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 104px solid #ffbc00;
  top: 104px;
}
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Glowing Neon Text</h1>
    <div class="triforce"></div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

Related Posts

Trending now

Thunder Animation website loader using HTML and CSS
Convertible Triangle Animation HTML and CSS tutorial for beginners
Fade In out loading animation HTML and CSS tutorial for beginners.
Globe Animation using HTML and CSS