Изогнутая кнопка CSS
Мне нужен контур кнопки, изогнутый сверху и снизу, но не по бокам. См. Образец изображения ниже, чтобы понять, о чем я прошу. Я оформлю все кнопки на своем веб-сайте как эта. Я пробовал несколько способов сделать это с помощью border-radius, но пока не добился успеха. Спасибо.
В настоящее время это невозможно в чистом CSS, вам понадобится SVG, используемый либо как путь клипа, либо напрямую: jsfiddle.net/wphpa59n
Что-то, с чем я играл (это некрасиво) .. jsfiddle.net/Hastig/cojoocn4/2
Ответы 2
Используйте :before и :after для кнопки
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}<button class = "btn">Info</button>Спасибо, но углы выглядят странно. В итоге я использовал SVG в качестве фонового изображения, чтобы добиться желаемого результата.
Я знаю, что это не тот ответ, которого вы ожидали, но я думаю, что лучший способ получить такой результат (самый простой способ получить достойные результаты) - это использовать backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
Я просто отправляю его на случай, если кто-то с похожими потребностями захочет найти альтернативу.
вот пример: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
Лучше всего сработало фоновое изображение. Несмотря на то, что я не мог сделать это с помощью чистого CSS, этот метод, похоже, работал лучше всего.
Возможный дубликат Сгибаем div с помощью CSS