DEV Community

Cover image for Make A Triangle in HTML/CSS
Greg
Greg

Posted on

Make A Triangle in HTML/CSS

A typical interview question and a handy way to show off.
Heres what you need:
index.html
styles.css
A parent container div and Four divs
Liveserver

four triangles



//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Four Triangles</title>
  </head>
  <body>
    <h1>Four Triangles</h1>
    <div class="container">
<div class="triangleUp"></div>
<div class="triangleDown"></div>
<div class="triangleLeft"></div>
<div class="triangleRight"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>



Enter fullscreen mode Exit fullscreen mode


@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,400;1,500;1,600;1,700&family=Roboto+Flex:opsz,wght@8..144,300&family=Roboto+Serif:opsz,wght@8..144,300&display=swap');
* {
  box-sizing: border-box;
}
/* Body centers the column at 100 vh and hide scrollbars */
body {
  font-family: 'Roboto Flex', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
}
.container {
  display: flex;
  justify-content: space-evenly;
}
.triangleUp {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}
.triangleDown {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #555;
}
.triangleLeft {
  margin: 3px;
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-right: 50px solid #555;
}
.triangleRight {
  width: 0;
  height: 0;
  margin: 3px;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-left: 50px solid #555;
}


Enter fullscreen mode Exit fullscreen mode

The main concept here is there are three properties that are needed to create an equilateral triangle.

We only need three sides and can leave the fourth border out which collapses.

  • 25px solid transparent;
  • 25px solid transparent;
  • 50px solid #555;

four triangles

Top comments (0)