如何使用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％的箭头图标

回答

相关问题