How To Create Triangle Shape In Box

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:

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories