How to draw a triangle with a transparent background with a frame?

Question

I would like to know how to draw a triangle with a transparent background with borders? The examples I have provided do not provide boundaries. Any way to achieve this?

Answer 1

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

Answer 2

Here's a clear, clean 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

Answer 3

This is a triangle with a transparent background, the borders of which you can draw using two of them above the other http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

Absolutely place a slightly smaller triangle on the existing one.