试图翻转三角形CSS

一直试图跟踪和这个小提琴演奏：http://jsfiddle.net/bossy_nova/wBUW7/1/试图翻转三角形CSS

我一直在寻找一种方式来获得这个有点三角成为一个向下三角形。随着旋转，并没有证明是有用的。我错过了什么吗？

那么如何翻转这个箭头？感谢您提前帮忙。

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

来源

2012-12-06 Modelesq

你的转变需要在你的主要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-06 21:12:34 David

旋转三角形从 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>

来源

2012-12-06 21:15:01

360度只是应用旋转变换到主要元素。您还需要应用一些边距将顶部边缘带回到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-06 21:17:29 greg5green

你可以使用上面的答案，或者你可以改变定位...

.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-06 21:23:08 Joseph

试图翻转三角形CSS

回答

相关问题