SEARCH
Я пытаюсь добавить пунктирные боковые отступы, как на изображении. Только по бокам текста. Как мне это сделать?
Перевод вопроса: 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;
}
SEARCH
MOST POPULAR
Перевод ответа: Diagonal dashed pattern on each the side of paragraph @web-tiki
Комментариев нет:
Отправить комментарий