css html 45度角箭头,纯css实现带拐角方向流动箭头

图一是示意，图二是真实效果，动态加不上，只能用红箭头表示下了。。。。。。。。。。。

HTML代码：

CSS代码：

/*向右流动箭头*/

.pipeline_right_arrows {

width: 100%;

height: 6px;/*图片height为4px，上下border各为1px*/

border-top: 1px solid #1AB395;

border-bottom: 1px solid #1AB395;

}

/*向下流动箭头*/

.pipeline_down_arrows {

width: 6px;/*图片width为4px，上下border各为1px*/

height: 100%;

border-left: 1px solid #1AB395;

border-right: 1px solid #1AB395;

}

.pipecorner_arrows .position_left_bottom {

position: absolute;

bottom: 6px;

left: 0;

}

.pipecorner_arrows .position_bottom_left {

position: absolute;

bottom: 0;

left: 6px;

}

/*初始化下箭头*/

.arrow_down_arrows {

width: 100%;

height: 100%;

overflow: hidden;

background: url("../images/square_default_y.png") repeat-y 0 0;

/*无限循环箭头动画效果*/

animation: down_arrow_square_default 3s infinite linear;

-moz-animation: down_arrow_square_default 3s infinite linear;

-webkit-animation: down_arrow_square_default 3s infinite linear;

-o-animation: down_arrow_square_default 3s infinite linear;

}

/*初始化右箭头*/

.arrow_right_arrows{

width: 100%;

height: 100%;

overflow: hidden;

background: url("../images/square_default_x.png") repeat-x 0 0;

/*无限循环箭头动画效果*/

animation: right_arrow_square_default 3s infinite linear;

-moz-animation: right_arrow_square_default 3s infinite linear;

-webkit-animation: right_arrow_square_default 3s infinite linear;

-o-animation: right_arrow_square_default 3s infinite linear;

}

@keyframes down_arrow_square_default {

0% {

background: url("../images/square_default_y.png") repeat-y 0 0;

}

100% {

/*图片height为8px，两个图片错开，以免卡顿，设置y为height的2倍，16px*/

background: url("../images/square_default_y.png") repeat-y 0 16px;

}

}

@keyframes right_arrow_square_default {

0% {

background: url("../images/square_default_x.png") repeat-x 0 0;

}

100% {

background: url("../images/square_default_x.png") repeat-x 16px 0;

}

}

/*拐角方块定位*/

.corner_box {

width: 6px;

height: 6px;

position: absolute;

}

.corner_box_left_bottom {

bottom: 0;

left: 0;

}

.corner_box .corner_square {

width: 6px;

height: 6px;

background: #1AB395;

}

背景图片：

        

square_default_x.png               square_default_y.png

8px   *     4px                                4px  *   8px