记录：css如何实现一条线延申，并控制延申的方向

如何实现一条线延申，并控制延申的方向"/>

记录：css如何实现一条线延申，并控制延申的方向

首先我们得思想是通过控制宽或者高来实现直线延申得效果

@keyframes box-1-hgt {0% {height: 0 * $remh;}100% {height: 44 * $remh;}
}

为了控制变化得方向，将直线得起点固定定好位置，此处利用得是绝对定位，比如需要从左向右延申，那么就将位置定位：left:
若从右向左则用right定位，同理，若从上向下定位用top定位等

  .box {position: absolute;&.box-1 {top: 80 * $remh;right: -170 * $remh;width: 200 * $remh;height: 44 * $remh;&:before {position: absolute;content: '';bottom: 0;left: 0;height: 0;border-left: dashed 2 * $remh rgba(#fff, 0.26);}&:after {position: absolute;content: '';bottom: 0;right: 0;width: 0;border-bottom: dashed 2 * $remh rgba(#fff, 0.26);}}}