线性箭头用css3,一组使用CSS3实现的箭头图标

CSS

语言：

CSSSCSS

确定

#arrows {

position: relative;

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row wrap;

-ms-flex-flow: row wrap;

flex-flow: row wrap;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

#arrows li {

position: relative;

width: calc(25% - 100px);

height: 30px;

margin: 50px;

background: #222;

font-size: 7pt;

color: #fff;

font-weight: 800;

line-height: 30px;

text-align: center;

text-transform: uppercase;

}

#arrows li:before {

content: '';

position: absolute;

border-width: 15px;

border-style: solid;

border-color: transparent;

}

#arrows li.top:before {

top: 0;

left: 50%;

border-bottom-color: #222;

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

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

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

}

#arrows li.bottom:before {

left: 50%;

bottom: 0;

border-top-color: #222;

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

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

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

}

#arrows li.left:before {

top: 50%;

left: 0;

border-right-color: #222;

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

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

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

}

#arrows li.right:before {

top: 50%;

right: 0;

border-left-color: #222;

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

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

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

}

#arrows li.top-left:before {

top: 0;

left: 0;

border-left-color: #222;

border-bottom-color: #222;

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

}

#arrows li.top-right:before {

top: 0;

right: 0;

border-right-color: #222;

border-bottom-color: #222;

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

}

#arrows li.bottom-left:before {

left: 0;

bottom: 0;

border-top-color: #222;

border-left-color: #222;

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

}

#arrows li.bottom-right:before {

right: 0;

bottom: 0;

border-top-color: #222;

border-right-color: #222;

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

}

#arrows li.left-top:before {

top: 0;

left: 0;

border-top-color: #222;

border-right-color: #222;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

#arrows li.left-bottom:before {

left: 0;

bottom: 0;

border-right-color: #222;

border-bottom-color: #222;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

#arrows li.right-top:before {

top: 0;

right: 0;

border-top-color: #222;

border-left-color: #222;

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%);

}

#arrows li.right-bottom:before {

right: 0;

bottom: 0;

border-left-color: #222;

border-bottom-color: #222;

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%);

}