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

Answer 2

将三角形旋转360度 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

只需将旋转变换应用于主元素即可。您还需要应用一些余量来使最高优势回到JSFiddle的视野中。

.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

您可以使用上述答案，也可以更改定位......

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

试图翻转三角形css

4 个答案: