Html5 css3 左箭头,CSS3 左右箭头（尖头括号）

CSS

语言：

CSSSCSS

确定

html {

background: lightgray;

}

body {

position: absolute;

top: 50%;

left: 50%;

width: 6rem;

height: 3rem;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.arrow {

position: absolute;

top: 50%;

width: 2rem;

height: 2rem;

border-top: 0.4rem solid black;

border-right: 0.4rem solid black;

box-shadow: 0 0 0 lightgray;

-webkit-transition: all 200ms ease;

transition: all 200ms ease;

}

.arrow.left {

left: 0;

-webkit-transform: translate3d(0, -50%, 0) rotate(-135deg);

transform: translate3d(0, -50%, 0) rotate(-135deg);

}

.arrow.right {

right: 0;

-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);

transform: translate3d(0, -50%, 0) rotate(45deg);

}

.arrow:hover {

border-top: 0.8rem solid white;

border-right: 0.8rem solid white;

box-shadow: 0.4rem -0.4rem 0 black;

}

.arrow:hover.left {

left: -0.2rem;

}

.arrow:hover.right {

right: -0.2rem;

}