собственно вот на
не могу понять, как можно сделать саморастягивающуюся кнопку с такими стрелками по бокам (пробовал сделать просто сплошные стрелки, но мне это не подходит, нужно с такой полоской по контуру), а также полоски вверху и снизу кнопки (к краю они исчезают, а в центре наиболее яркие
Ответ
Можно сделать по такому принципу:
div {
position: relative;
display: inline-block;
padding: 0 60px;
height: 27px;
line-height: 27px;
vertical-align: middle;
color: white;
background: url(https://i.stack.imgur.com/CQPcT.jpg) repeat-x 0 0;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 27px;
background: url(https://i.stack.imgur.com/SyKbw.png) no-repeat left -10px top -6px;
}
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 27px;
background: url(https://i.stack.imgur.com/SyKbw.png) no-repeat right -12px top -6px;
}
Полоски сверху и снизу можете добавить отдельно с помощью liner-gradient спозиционированные абсолютно.
Комментариев нет:
Отправить комментарий