index.css

html, body{
    position: relative;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background: #f0f3e6;
    overflow: hidden;
}
.horizontal_ruler{
    position: absolute;
    height:10px;
    left:25px;
    right:25px;
    background: #61b7f3;
    top:50%;
    margin-top: -5px;
}
.horizontal_ruler:after{
    content: " ";
    width: 0;
    height: 0;
    position:absolute;
    left: -20px;
    top: -10px;
    border-top: 15px solid transparent;
    border-right: 40px solid #61b7f3;
    border-bottom: 15px solid transparent;
}
.horizontal_ruler:before{
    content: " ";
    width: 0;
    height: 0;
    position:absolute;
    right: -20px;
    top: -10px;
    border-top: 15px solid transparent;
    border-left: 40px solid #61b7f3;
    border-bottom: 15px solid transparent;
}
.vertical_ruler{
    position: absolute;
    width:10px;
    top:25px;
    bottom:25px;
    background: #61b7f3;
    left:50%;
    margin-left: -5px;
}
.vertical_ruler:after{
    content: " ";
    width: 0;
    height: 0;
    position:absolute;
    left: -10px;
    bottom: -20px;
    border-left: 15px solid transparent;
    border-top: 40px solid #61b7f3;
    border-right: 15px solid transparent;
}
.vertical_ruler:before{
    content: " ";
    width: 0;
    height: 0;
    position:absolute;
    left: -10px;
    top: -20px;
    border-left: 15px solid transparent;
    border-bottom: 40px solid #61b7f3;
    border-right: 15px solid transparent;
}
#horizontal_size, #vertical_size{
    position:absolute;
    display: inline-block;
    background: #f0f3e6;
    color: #61b7f3;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    font-size: 27px;
    line-height: 44px;
    height: 40px;
    padding: 0 10px;
    top: 50%;
    left: 20%;
    margin: -20px 0 0 0;
}
.vertical_size_overflow{
    position:absolute;
    top: 20%;
    width:100%;
    height:40px;
}
#vertical_size{
    position:relative;
    margin: 0 auto;
    top: auto;
    left: auto;
    display: table;
}