Как сверстать такую кнопку?
Пробовал box-shadow, но не то.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПросто:
border-bottom: 3px solid #C86A40;
border-radius: 3px;
Значения примерные.
Можно снизу ещё один элемент добавить (например, div) и у него прописать
border-bottom-left-radius
и border-bottom-right-radius
, тем самым закруглив снизу границу нижнего элемента, получится тоже самое. Пример
#top{
height:200px;
background:#990099;
color:white;
width: 100px;
height: 50px;
}
#bottom{
height:5px;
background:#770077;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 100px;
}
<div id="top"> Button </div>
<div id="bottom"></div>
div
обойтись, тем более в таком случае ещё придётся в раппер заворачивать всё чтобы не распалось.
div
шириной в пиксель!