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。