CODEWITHSUNDEEP
css
Houston
Houston

Reputation: 69

How to draw triangle with transparent background with border?

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?

Upvotes: 7

Views: 28096

Answers (4)

bookcasey
bookcasey

Reputation: 40473

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;
}

Upvotes: 4

creme
creme

Reputation: 473

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

Upvotes: 13

alexdets
alexdets

Reputation: 1583

It triangle with a transparent background, borders you can do using two of these one above the other http://jsfiddle.net/alexdets/vYAZQ/26/

Upvotes: -1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Absolutely position a slightly smaller triangle on an existing one.

Upvotes: -2

Related Questions