Страницы

Поиск по вопросам

вторник, 5 марта 2019 г.

Диагональный штриховой pattern с обоих сторон абзаца



Я пытаюсь добавить пунктирные боковые отступы, как на изображении. Только по бокам текста. Как мне это сделать?
Перевод вопроса: Diagonal dashed pattern on each the side of paragraph@Daniel


Ответ

Вы можете использовать линейный градиент для pattern и техники, описанные в статье: Line before and after title over image , чтобы расположить его по обе стороны заголовка.
Это будет примерно так:
.search { margin: .7em auto; overflow: hidden; padding-left:100px; } .search:before, .search:after { content: ""; display: inline-block; width: 100%; height:0.8em; margin: 0 .5em 0 -105%; vertical-align: middle; background-image: linear-gradient(-45deg, #E0E0E0 25%, transparent 25%, transparent 50%, #E0E0E0 50%, #E0E0E0 75%, transparent 75%, transparent); background-size: 0.5em 0.5em; } .search:after { margin: 0 -105% 0 .5em; } .search p { display: inline-block; vertical-align: middle; }


Перевод ответа: Diagonal dashed pattern on each the side of paragraph @web-tiki

Комментариев нет:

Отправить комментарий