Question

这里我需要做的是使用下面的CSS技巧旋转45％。

这里我已经包含了我尝试过的内容，

.hero { 	
	position:relative;

}


.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;
}

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

Answer 1

使用此：

 .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*/
  }

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用转换属性

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

Answer 3

尝试这个

<强> 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;
}

Answer 4

使用 transform：rotate（45deg）;

＆＃13;

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

＆＃13;

BluetoothRadio.PrimaryRadio.LocalAddress

＆＃13;

Answer 5

只需使用

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

Answer 6

将边框样式更改为

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

＆＃13;

.hero { 	
	position:relative;

}


.hero:after,
.hero:after {
	z-index: -1;
	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;
}

＆＃13;

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

＆＃13;

如何使用CSS

6 个答案: