Trying to flip a triangle css - css

Question

Been trying to follow and play with this fiddle: http://jsfiddle.net/bossy_nova/wBUW7/1/
I've been looking for a way to get this kinda triangle to become a downward facing triangle. Played with the rotations, and that didn't prove useful. Am I missing something?
So how do I flip this arrow? Thanks for you help in advance.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 0px 0px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​

Answer 1

Your transformations need to be in your main CSS, not in the :after state:
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
transform: rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

Answer 2

Rotate a triangle 360 degrees from
http://www.identifydesign.net/tutorials/css/triangles-circles/
<style type="text/css">
.triangle2{
width:0;
height:0;
border-top:20px solid #000;
border-left:20px solid transparent;
border-right:20px solid transparent;
-webkit-transform:rotate(360deg);
}
</style>
<div class="triangle"></div>

Answer 3

Just apply the rotate transform to the main element. You'll also want to apply some margin to bring the top edge back into JSFiddle's field of view.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 0px 0px -2px rgba(0,0,0,0.5);
transform: rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
margin-top: 15px;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​
JSFiddle

Answer 4

You could use the above answers or you could change the positioning...
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 -16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: -25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​