Hello friends. In today’s tutorial, I will teach you how to create a ‘CSS Bordered Triangle’. All you need is HTML and CSS, to create this project. This a beginner-friendly project.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here:
If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file. We create a triangle using a div element with the class “triangle” here and later style it using CSS.
CSS:
Next, we style our triangle using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
The triangle has a width and height of 12em, a white border of 1em, and is positioned absolutely in the center of the screen using the transform and left/top properties.
To create the outline effect, we remove the right and bottom borders of the triangle using the border-right and border-bottom properties.
Then we rotate the triangle 45 degrees using the transform property. We create a outline using the pseudo-element “before”, which is positioned absolutely and has a white border on top. Next we calculate the width of the pseudo-element is using the formula (sqrt(2) * (12em + 1em)) to create a diagonal line. Next up, we also rotate pseudo-element -45 degrees using the transform property to create the outline effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Outlined Triangle</title>
<style>
body {
background-color: #202020;
}
.triangle {
width: 12em;
height: 12em;
border: 1em solid #ffffff;
position: absolute;
transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 50%;
border-right: none;
border-bottom: none;
}
.triangle:before {
position: absolute;
content: "";
border-top: 1em solid #ffffff;
width: calc(1.41 * (12em + 1em));
transform: rotate(-45deg);
left: -3.3em;
top: 5.35em;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
