2

В общем задача состоит в следующем: нужно сделать вот такую кнопку, но я без понятия, как ее заострить. border-radius здесь вроде как не подойдет. Есть ли возможность заострить именно input или button, или можно только заменить кнопку картинкой? введите сюда описание изображения

2 ответа 2

4

button {
  background: #0095ff;
  color: #fff;
  padding: 10px 20px;
  border: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
  line-height: 16px;
  font-size: 16px
}

button::before {
  content: '';
  display: block;
  border-left: 25px solid #0095ff;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 0;
  position: absolute;
  right: -25px;
  top: 0
}
<button>Далее</button>

1

Можно сделать через CSS. Например вот так:

<button>Done</button>



.button {
  padding: 0 1.4em;
  font-size: 18px;
  line-height: 48px;
  color: #fff;
  border: none;
  text-decoration: none;
  display: inline-block;
}
button:hover {
  color: #fff;
}

button:hover, button:focus {
  background: #e74c3c;
}

button {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3NGMzYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTc0YzNjIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkMDQxMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMDQxMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e74c3c), color-stop(50%, #e74c3c), color-stop(50%, #d04132), color-stop(100%, #d04132));
  background-image: -moz-linear-gradient(#e74c3c 0%, #e74c3c 50%, #d04132 50%, #d04132 100%);
  background-image: -webkit-linear-gradient(#e74c3c 0%, #e74c3c 50%, #d04132 50%, #d04132 100%);
  background-image: linear-gradient(#e74c3c 0%, #e74c3c 50%, #d04132 50%, #d04132 100%);
}

button:hover:after, button:focus:after {
  background: #e74c3c;
}

button {
  position: relative;
}
button:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDcwNDI4IiB5MT0iMC4xMDA1ODIiIHgyPSItMC4wNzA0MjgiIHkyPSIwLjg5OTQxOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3NGMzYyIvPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNzRjM2MiLz48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZDA0MTMyIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNkMDQxMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-linear-gradient(215deg, #e74c3c 0%, #e74c3c 0%, #d04132 0%, #d04132 90%);
  background-image: -webkit-linear-gradient(215deg, #e74c3c 0%, #e74c3c 0%, #d04132 0%, #d04132 90%);
  background-image: linear-gradient(-125deg, #e74c3c 0%, #e74c3c 0%, #d04132 0%, #d04132 90%);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  height: 34.28571px;
  width: 34.28571px;
  position: absolute;
  top: 50%;
  right: 0;
  margin: -17.14286px -17.14286px;
}

Исходный код: https://codepen.io/tabzam/pen/hnpKI

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.