css 标尺,css纵向标尺如何制作

今天我的一位朋友不会写纵向标尺，我就帮忙了一下忙，现在整理出来了，但是没有前边的数字值，还望各位包涵。

ul {

list-style: none;

}

ul .right1 {

position: relative;

width: 10px;

height: 8px;

border-bottom: 1px solid gray;

border-left: 1px solid transparent;

}

ul .left1 {

position: relative;

width: 10px;

height: 8px;

border-bottom: 1px solid gray;

border-right: 1px solid gray;

}

ul .right11 {

/*position: relative; */

width: 10px;

margin-left: 10px;

margin-top: -1px;

/*height: 20px; */

border-bottom: 1px solid gray;

/*border-right: 1px solid gray; */

}

.miright11 {

/*position: relative; */

width: 5px;

margin-left: 10px;

margin-top: -1px;

/*height: 20px; */

border-bottom: 1px solid gray;

/*border-right: 1px solid gray; */

}

.mileft1 {

/*position: relative; */

width: 5px;

height: 8px;

margin-left: 5px;

border-bottom: 1px solid gray;

border-right: 1px solid gray;

}

/*ul > li:before{

content:'1';

}*/

ul > li + li {

border-left-color: gray;

}

ul > li > b {

display: block;

position: absolute;

height: 20px;

line-height: 20px;

margin-left: 20px;

margin-top: 10px;

}

/* ul li:before{

content:"1";

}*/

效果图：