1

一直试图跟随和玩这个小提琴：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);
}​
4

4 回答 4

5

您的转换需要在您的主 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 */
 }
于 2012-12-06T21:12:34.400 回答
1

从http://www.identifydesign.net/tutorials/css/triangles-circles/旋转一个三角形 360 度 

<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>
于 2012-12-06T21:15:01.327 回答
0

只需将旋转变换应用于主要元素。您还需要应用一些边距以将顶部边缘带回 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

于 2012-12-06T21:17:29.887 回答
0

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

.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);
}​
于 2012-12-06T21:23:08.373 回答