css 绘制 上，下，右，左箭头

1 上箭头

 

.drawJt{
            border: 4rpx solid #c2c0c0;
            width: 40rpx;
            height: 40rpx;
            border-left-color: transparent;
            border-top-color: transparent;
            transform: rotate(-135deg);//上箭头
            margin: 0 auto;
            margin-top: 20rpx;
        }

2 下箭头

 

.drawJt{
            border: 4rpx solid #c2c0c0;
            width: 40rpx;
            height: 40rpx;
            border-left-color: transparent;
            border-top-color: transparent;
            //下箭头
            //transform: rotate(45deg);
            margin: 0 auto;
            margin-top: 20rpx;
        }

3 左箭头

 

.drawJt{
            border: 4rpx solid #c2c0c0;
            width: 40rpx;
            height: 40rpx;
            border-left-color: transparent;
            border-top-color: transparent;
            transform: rotate(135deg);//左箭头
            margin: 0 auto;
            margin-top: 20rpx;
        }

4右箭头

 

.drawJt{
            border: 4rpx solid #c2c0c0;
            width: 40rpx;
            height: 40rpx;
            border-left-color: transparent;
            border-top-color: transparent;
            transform: rotate( -45deg);//右箭头
            margin: 0 auto;
            margin-top: 20rpx;
        }