CODEWITHSUNDEEP
htmlcss
Pawan Lakhara
Pawan Lakhara

Reputation: 1150

Triangle with white border

How can I create Triangle with white border using CSS? Like the image below.

enter image description here

when i add this css 

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

result is

enter image description here

Upvotes: 3

Views: 191

Answers (1)

Talha Akbar
Talha Akbar

Reputation: 10040

CSS:

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

HTML:

<div class="triangle"></div>

Fiddle

Upvotes: 1

Related Questions