試圖翻轉三角形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

回答

相關問題