Ruler

index.html

<div class="table flex-vertically">
  <h1>CSS Ruler</h1>
  <div class="ruler">
    <div class="inches">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19</div>
    <div class="separator"></div>
    <div class="centimeters">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</div>
  </div>
</div>

ruler.markdown

Ruler

A Pen by Giovanni Orlando on CodePen.

License.

style.css

:root {
  --ruler-yellow: #ffcc00;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background-color: antiquewhite;
  font-size: 1rem;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
}

.table {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.flex-vertically {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-horizontally {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ruler {
  width: 24rem;
  height: 6rem;
  background-color: var(--ruler-yellow);
  border: 0.125rem solid black;
}

.inches {
  width: 24rem;
  height: 1.5rem;
  line-height: 1.5rem;
  word-spacing: 2.54px;
  border-bottom: 2px solid black;
  background: repeating-linear-gradient( to right, var(--ruler-yellow), var(--ruler-yellow) 3px, black 4px, black 4px);
}

.separator {
  width: inherit;
  height: 2.75rem;
}

.centimeters {
  width: 24rem;
  height: 1.5rem;
  line-height: 1.5rem;
  word-spacing: 1px;
  border-top: 2px solid black;
  background: repeating-linear-gradient( to right, var(--ruler-yellow), var(--ruler-yellow) 1px, black 2px, black 2px);
}