Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw triangle with transparent background with border?

Tags:

css

I would like to know how to draw a triangle with a transparent background with borders? The examples I had found do not provide borders. Any way to accomplish this?

like image 700
Houston Avatar asked Nov 25 '11 01:11

Houston


People also ask

What is border transparent?

CSS Transparent border means that the behind object can be seen if we apply the border as transparent or rgba. Transparent border property beautifies the HTML page by making behind objects distinctly visible.

How do you make a Div triangle shape?

Approach: To create the triangle, in the HTML part we have to just add a single div for each triangle. The concept is to create a box with no width or height. The width of the border determines the Triangle's actual width and height.


2 Answers

Here's a transparent pure css triangle with borders:

.container {
    width: 200px;
    height: 200px;
    position: relative;
    border-top: 4px solid #e74c3c;
}

.triangle {
    position: absolute;
    margin: auto;
    top: -70px;
    left: 0;
    right: 0;
    width: 137px;
    height: 137px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 4px solid #e74c3c;
    border-bottom: 4px solid #e74c3c;
}

Demo

like image 55
creme Avatar answered Oct 16 '22 21:10

creme


Demo

 .triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red;
     position:relative;
 }
 .triangle:after{
     content:'';
     position:absolute;
     top:5px;
     left:-45px;
     width: 0;
     height: 0;
     border-left: 45px solid transparent;
     border-right: 45px solid transparent;
     border-bottom: 92px solid white;
}
like image 5
bookcasey Avatar answered Oct 16 '22 21:10

bookcasey