In this topic,
We are going to see how to create a triangle shape in the box using CSS.
Step-1: Create Html Code in the index.html file.
<body>
<div class="main-shap-box"> </div>
</body>
Step-2: Add CSS Code in the <style>…</style> on the index.html file.
If you want to create a triangle shape in the box, you need to add border CSS to the “:after” box.
I added a border property to “:after” of main-cursor-box.
Please review the below examples.
1. Triangle Up Shape
.main-shap-box:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
border-bottom: 125px solid #000;
}
Output:
2. Triangle Down Shape
.main-shap-box:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
border-top: 125px solid #000;
}
Output:
3. Triangle Left Shape
.main-shap-box:after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 125px solid transparent;
border-bottom: 125px solid transparent;
border-right: 125px solid #000;
}
Output:
4. Triangle Right Shape
.main-shap-box:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 125px solid transparent;
border-bottom: 125px solid transparent;
border-left: 125px solid #000;
}
Output:
5. Triangle Top Left Shape
.main-shap-box:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-bottom: 125px solid transparent;
border-left: 125px solid #000;
}
Output:
6. Triangle Top Right Shape
.main-shap-box:after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-bottom: 125px solid transparent;
border-right: 125px solid #000;
}
Output:
7. Triangle Bottom Left Shape
.main-shap-box:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-top: 125px solid transparent;
border-left: 125px solid #000;
}
Output:
8. Triangle Bottom Right Shape
.main-shap-box:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-top: 125px solid transparent;
border-right: 125px solid #000;
}
Output:
