Фон в тетрадную в линию

В добавок к ранее выложенному фону в клеточку на чистом CSS, добавлю ещё один фон на основе CSS-градиента. Это будет фон в тетрадную линию.

Во всех ДЕМО будет использоваться один и тот же HTML

<div class="lined_fone">

</div>

Фон тетрадная линия

Сам фон будем делать через CSS-функцию repeating-linear-gradient() для свойства background-image.

Демо:

CSS:

.lined_fone {
    background-color: #fff;
    background-image: repeating-linear-gradient(#fff 0px, #fff 24px, #008080 25px);
}

Тетрадная линия с полями слева

Теперь что касается полей как у настоящей школьной тетрадки, то мы добавим их через псевдо-элемент с абсолютным позиционированием. Сначала добавим самому элементу с фоном свойство position: relative; и опишем стили для полей.

CSS:

.lined_fone {
    position: relative;
    background-color: #fff;
    background-image: repeating-linear-gradient(#fff 0px, #fff 24px, #008080 25px);
}
.lined_fone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 60px;
    width: 2px;
    height: 100%;
    background-color: rgba(255,0,0,0.6);
}

Тетрадная линия с полями справа

Для полей справа, просто заменим у псевдо-элемента свойство left на right

CSS:

.lined_fone {
    position: relative;
    background-color: #fff;
    background-image: repeating-linear-gradient(#fff 0px, #fff 24px, #008080 25px);
}
.lined_fone::before {
    content: '';
    position: absolute;
    top: 0;
    right: 60px;
    width: 2px;
    height: 100%;
    background-color: rgba(255,0,0,0.6);
}