How to make a pure css triangle which has a white center - html

Question

I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/
However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).
Is this possible, and if so, how can it be done?

Answer 1

To create triangles with only CSS we use a zero width/height element with borders:
.arrow-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:
HTML --
<div class="top"></div>
<div class="bottom"></div>​
CSS --
.top {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
.bottom {
position : absolute;
width : 0;
height : 0;
z-index : 99;
border-left : 60px solid transparent;
border-right : 60px solid transparent;
border-bottom : 60px solid red;
}​
Here is a demo: http://jsfiddle.net/jasper/qnmpb/1/
Update
You can then put both of the triangle DIV elements inside a container and move that container however you want:
HTML --
<div id="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS --​
#container {
position : relative;
top : 25px;
left : 25px;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/3/
EDIT (2014):
I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :before and :after. I.e. replace the .top selector with something like .my-element-that-needs-a-triangle:before and the .bottom selector with something like .my-element-that-needs-a-triangle:after.

Answer 2

I think you could get a good idea of what to do by checking out this tutorial on pure css thought bubbles. It's doing what you're looking for.
http://www.sitepoint.com/pure-css3-speech-bubbles/

Answer 3

Depending on how you're using it, you can make a triangle, with a border and even box shadow, without the triangle border hack, using CSS transform: rotate(). See my answer here: https://stackoverflow.com/a/8867645/918414

Answer 4

If you want to create a triangle with borders (or box shadow look-alike) in pure CSS, you should use pseudo-elements :before and :after.
In my example, I added display:inline-block; to the element .arrow-dropdown to be able to create some kind of dropdown menu with a drop shadow. It is followed by .arrow-only which is a a basic triangle with a red border.
body {
margin: 10px;
background: #1670c4;
}
.text {
display: inline-block;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
cursor: default;
}
.arrow-dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 1px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-dropdown:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 4px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-dropdown:before {
content: '';
position: absolute;
border-style: solid;
border-width: 8px 5px 0;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
}
.arrow-only {
position: relative;
vertical-align: middle;
margin: 10px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-only:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 9px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-only:before {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 11px 0;
border-color: #f00 transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
margin:-1px 0 0 -2px;
}
<div class="text">
Dropdown text
</div><div class="arrow-dropdown"></div>
<div class="arrow-only"></div>