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

変換は、:after状態ではなく、メイン CSS にある必要があります。

.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

上記の回答を使用するか、配置を変更できます...

.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 に答える
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 に答える