如何使用CSS旋轉45％的箭頭圖標

-2

這裏我需要做的是使用下面的CSS技巧旋轉45％。如何使用CSS旋轉45％的箭頭圖標

在這裏，我已經包括了我都試過了，

.hero { \t 
 
\t position:relative; 
 

 
} 
 

 

 
.hero:after, 
 
.hero:after { 
 
\t z-index: -1; 
 
\t position: absolute; 
 
    top: 98.1%; 
 
    left: 70%; 
 
    margin-left: -25%; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: solid 50px #e15915; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
}

<div class="hero"></div>

來源

2016-12-29 Prasanga

究竟是什麼「的打擊CSS技巧」？ – connexo

使用變換屬性

.hero { 
-ms-transform: rotate(45deg); /* IE 9 */ 
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
transform: rotate(45deg); 
}

來源

2016-12-29 10:36:49

非常感謝您的回答，但這不適用於IE8，如果有任何CSS技巧。 – Prasanga

嘗試這種

demo

CSS

.rotate-45-left:before { 
    -o-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.rotate-45-right:before { 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.hidden { 
    visibility: hidden; 
}

來源

2016-12-29 10:37:00 falguni

使用變換：旋轉（45deg）;

.hero { \t 
 
\t position:relative; 
 

 
} 
 

 

 
.hero:after, 
 
.hero:after { 
 
\t z-index: -1; 
 
\t position: absolute; 
 
    top: 98.1%; 
 
    left: 70%; 
 
    margin-left: -25%; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: solid 50px #e15915; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
} 
 

 
.hero{ 
 
    transform:rotate(45deg); 
 
    }

<div class="hero"></div>

來源

2016-12-29 10:37:54

只需使用

.hero { 
-ms-transform: rotate(45deg); /* IE 9 */ 
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
transform: rotate(45deg); 
}

來源

2016-12-29 10:38:42

使用此：

.hero { 
    transform:rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform:rotate(45deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/ 
    }

.hero { \t 
 
    position:relative; 
 
    transform:rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform:rotate(45deg); 
 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/ 
 
} 
 
.hero:after, 
 
.hero:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 98.1%; 
 
    left: 70%; 
 
    margin-left: -25%; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: solid 50px #e15915; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
} 
 

 
.hero{ 
 
    transform:rotate(45deg); 
 
    }

<div class="hero"></div>

種

來源

2016-12-29 10:40:31 Taniya

非常感謝您的回答，這是工作.. – Prasanga

不客氣@Prasanga :) – Taniya

更改邊框樣式

border-left: solid 50px #e15915; border-top: solid 50px transparent; border-bottom: solid 50px transparent;

.hero { \t 
 
\t position:relative; 
 

 
} 
 

 

 
.hero:after, 
 
.hero:after { 
 
\t z-index: -1; 
 
\t position: absolute; 
 
    top: 98.1%; 
 
    left: 70%; 
 
    margin-left: -25%; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: solid 50px #e15915; 
 
    border-top: solid 50px transparent; 
 
    border-bottom: solid 50px transparent; 
 
}

<div class="hero"></div>

來源

2016-12-29 10:40:36 Anenth

如何使用CSS旋轉45％的箭頭圖標

回答

相關問題