用html让一条直线旋转,CSS3可以实现 三根线条 旋转成一个箭头吗，或者用其他办法？求大佬指导...

参考一楼代码，稍微加点动画渐变，代码如下。html>

.arrow {

width: 65px;

height: 50px;

background: #000;

padding: 30px 0 0 30px;

margin:30px auto 0;

position: relative;

}

.arrow i {

display: block;

width: 50px;

height: 5px;

background: #fff;

position: absolute;

border-radius: 10px 0 0 10px;

transition:all 300ms;

}

.arrow i:nth-of-type(1) {

width: 35px;

top:20px;

}

.arrow i:nth-of-type(2) {

width: 35px;

top:35px;

}

.arrow i:nth-of-type(3) {

width: 35px;

top:50px;

}

.arrow:hover i{

border-radius: 0;

height: 3px;

}

.arrow:hover i:nth-of-type(1){

top:35px;

transform-origin: left center;

transform: rotate(-45deg);

}

.arrow:hover i:nth-of-type(2){

width: 55px;

margin-left:-1px;

border-radius: 10px 0 0 10px;

}

.arrow:hover i:nth-of-type(3){

top:35px;

transform-origin: left center;

transform: rotate(45deg);

}