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
//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>
@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;
}
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;
Top comments (0)