试图翻转三角形css

Question

一直试图跟随和玩这个小提琴:http://jsfiddle.net/bossy_nova/wBUW7/1/

我一直在寻找一种方法来让这个三角形变成一个向下的三角形.玩旋转,并没有证明有用.我错过了什么吗？

那我该怎么翻这个箭呢？谢谢你的帮助提前.

.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

您的转换需要在您的主要CSS中,而不是在:after状态中:

.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 */
 }