css標尺製作

css標尺製作

效果圖如下：

代碼：

    <style>
        .box {
            position: absolute;
            top: 20px;
            left: 30px;
            width: 820px;
            height: 630px;
            background: #303030;
        }

        .ruleraxisx {
            position: absolute;
            background-color: #303030;
            background-size: 50px 30px;
            background-image: linear-gradient(90deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(180deg, #303030 50%, transparent 50%), linear-gradient(90deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(180deg, #303030 70%, transparent 70%), linear-gradient(90deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
            background-repeat: repeat-x;
            z-index: 100;
            width: 800px;
            top: 20px;
            left: 50px;
            min-height: 30px;
        }

        .ruleraxisy {
            position: absolute;
            background-color: #303030;
            background-size: 20px 50px;
            background-image: linear-gradient(0deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(90deg, #303030 50%, transparent 50%), linear-gradient(0deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(90deg, #303030 70%, transparent 70%), linear-gradient(0deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
            background-repeat: repeat-y;
            width: 20px;
            height: 600px;
            left: 30px;
            top: 50px;
            min-height: 20px;
        }

        .scalex {
            list-style-type: none;
            position: absolute;
            left: -25px;
            top: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            color: #b1b4b4;
            font-size: 0;
            text-shadow: 0px 1px 1px #000;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit瀏覽器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期瀏覽器*/
            user-select: none;
            z-index: 1;
        }

        .scalex li {
            display: inline-block;
            width: 50px;
            text-align: center;
            font-size: 11px;
        }

        .scaley {
            list-style-type: none;
            position: absolute;
            left: 0px;
            top: -25px;
            margin: 0;
            padding: 0;
            width: 50px;
            height: 100%;
            overflow: hidden;
            white-space: nowrap;
            color: #b1b4b4;
            font-size: 0;
            text-shadow: 0px 1px 1px #000;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit瀏覽器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期瀏覽器*/
            user-select: none;
            z-index: 1;
        }

        .scaley li {
            writing-mode: vertical-lr;
            height: 50px;
            text-align: center;
            font-size: 11px;
        }
    </style>
<div class="box">

</div>
<div class="ruleraxisx">
    <ul class="scalex">
        <li></li>
        <li>50</li>
        <li>100</li>
        <li>150</li>
        <li>200</li>
        <li>250</li>
        <li>300</li>
        <li>350</li>
        <li>400</li>
        <li>450</li>
        <li>500</li>
        <li>550</li>
        <li>600</li>
        <li>650</li>
        <li>700</li>
        <li>750</li>
        <li>800</li>
    </ul>
</div>
<div class="ruleraxisy">
    <ul class="scaley">
        <li></li>
        <li>50</li>
        <li>100</li>
        <li>150</li>
        <li>200</li>
        <li>250</li>
        <li>300</li>
        <li>350</li>
        <li>400</li>
        <li>450</li>
        <li>500</li>
        <li>550</li>
        <li>600</li>
        <li>650</li>
        <li>700</li>
        <li>750</li>
        <li>800</li>
    </ul>
</div>

參考：https://juejin.im/post/5ca5b48ae51d456c9024b69d
參考網址的y軸是通過旋轉得到的，而且標尺的數字位置不對，這裏重新修改了一下。原理就是重複利用linear-gradient。