How to Create a Transparent Triangle with Border Using CSS

How to draw triangle with transparent background with border?

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

How to create a transparent triangle with border using CSS?

I've found a webkit-only solution, using the ▲ character:

.triangle {  -webkit-text-stroke: 12px black;  color: transparent;  font-size: 200px;}

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

How do i create transparent triangle with thin gray borders css

did you mean something like this?
You can change the color of the border with: border-top-color: #B1B1B1;
Once you would like change the dimensions of the triangle, you have to change it everywhere.

.arrow-down {  position: relative;}.arrow-down:after,.arrow-down:before {  border-top: 20px solid white;  border-left: 20px solid transparent;  border-right: 20px solid transparent;  margin-left: -20px;  position: absolute;  bottom: -20px;  content: '';  left: 50%;}.arrow-down:before {  border-right: 20px solid transparent;  border-top: 20px solid;  border-left: 20px solid transparent;  border-top-color: #B1B1B1;  bottom: -22px;  margin-left: -20px;}

<div class="arrow-down"></div>

transparent triangle with border

You can also use gradients and/or transform:

on left: square + border-top/left + transform + gradient to draw the bottom border:
on middle : yours
on right : border-bottom + gradient for the triangle top borders

both extra example can hold content such as font icone / text / image .

body {  background:tomato;}
#rotate {  position:fixed;  border:solid turquoise;  border-bottom:none;  border-right:none;  bottom:7px;  left:calc(50% - 180px);  height:75px;  width:75px;  transform-origin: bottom left;  transform:rotate(45deg);  background:linear-gradient(to bottom right, transparent calc(50% - 3px), turquoise calc(50% - 3px), turquoise 50%, transparent 50% ); }
#bg-gradient {  position:fixed;  bottom:5px;  left: calc(50% + 70px)  ;  border-bottom:solid turquoise;  background:linear-gradient(to bottom right, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ),linear-gradient(to bottom left, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ) right    ;  background-repeat:no-repeat;  background-size:50% 100%;  height:55px;  width:110px;  }
#down { display: block; position: fixed; left: 0; right: 0; width: 0; height: 0; margin: 0 auto; border-left: 55px solid transparent; border-right: 55px solid transparent; z-index: 20;  bottom: 5px;  border-bottom: 55px solid rgba(250,250,250,0.75); }

<div id="down"></div><div id="rotate"></div><div id="bg-gradient"></div>

Make a CSS triangle with transparent background on a div with white bg image?

The Fiddle:

http://jsfiddle.net/JaMH9/2/

The HTML:

<div class="bar">
    <span class="home">^<br>Home, sweet home!</span>
</div>

The CSS:

.bar {
    position: relative;
    width: 90%;
    height: 30px;
    margin: 0 auto;
}

.home {
    position: absolute;
    top: 0px;
    left: 60%;
    width: 20%;
    text-align: center;
}

.bar:before, .bar:after {
    content:'';
    position: absolute;
    top: 0;
    height: 0;
    border-top: 30px solid white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.bar:before {
    left: 0;
    width: 70%;
    border-right: 30px solid transparent;
}

.bar:after {
    right:0;
    width: 30%;
    border-left: 30px solid transparent;
}

Adding borders to triangle built as borders

You can add the triangle borders with another pseudo element.

.dropdown-content:before,
.dropdown-content:after {
  position: absolute;
  left: 70%;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom-width: 20px;
  border-bottom-style: solid;
}
.dropdown-content:before {
  top: -21px; /* extra -1 pixel offset at the top */
  border-bottom-color: red;
}
.dropdown-content:after {
  top: -20px;
  border-bottom-color: yellow;
}

.dropdown {  position: relative;  vertical-align: middle;  display: inline-block;}
.dropdown-content {  position: absolute;  min-width: 160px;  background-color: yellow;  padding: 12px 16px;  margin-top: 20px;  z-index: 1;  border-color: red;  border-width: thin;  border-style: solid;}
.dropdown-content a {  display: block;}
.dropdown-content:before,.dropdown-content:after {  position: absolute;  left: 70%;  width: 0;  height: 0;  content: '';  border-left: 20px solid transparent;  border-right: 20px solid transparent;  border-bottom-width: 20px;  border-bottom-style: solid;}
.dropdown-content:before {  top: -21px; /* extra -1 pixel offset at the top */  border-bottom-color: red;}
.dropdown-content:after {  top: -20px;  border-bottom-color: yellow;}

<div class='dropdown'>  <div class="dropdown-content">    <a href="#">Link 1</a>    <a href="#">Link 2</a>    <a href="#">Link 3</a>  </div></div>

Adding border to CSS triangle

One way to do it is the create an inner triangle which is smaller.

.triangle-left {    width: 0;    height: 0;    border-top: 23px solid transparent;    border-bottom: 23px solid transparent;    border-right: 23px solid red;}
.inner-triangle {    position: relative;    top: -20px;    left: 2px;    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-right: 20px solid blue;}

<div class="triangle-left">    <div class="inner-triangle"></div></div>

CSS triangle on top of div with transparent bottom border

With this markup it is not possible to do so.
Realising this design is kind of hacky. You need to set border-top-color: transparent on your bubble and create a top border with three individual elements. Make their wrapper take up full width and use flexbox for example to align the triangle part to the center and model the top-border fragments individually.