DEV Community

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

Posted on

1

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs