Как создать нижнюю границу в форме лотка, как для Android

Question

В одном из пользовательских вводов, которые я создал в js-файле для приложения, использующего Phonegap, мы должны иметь точную границу, поскольку это приводило к нормальному вводу на устройствах Android.

Таким образом, вопрос заключается в том, как создать фигурную границу, используя приложение точного вида css для пользовательских вводов, которые по умолчанию этого не получают.

Answer 1

Используйте это решение

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;

}

.rawp{
    position: relative;
    display: inline-block;
}


.rawp:after {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    left: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

.rawp:before {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    right: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

<div class="rawp">
  <input></input>
</div>

Answer 2

Для этого мы можем использовать комбинацию контура и границы.Нам нужен больший контур, чем граница слева и справа, и ровно столько, сколько нам нужен размер формы лотка.Таким образом, в основном контур, который является прозрачным, работает как маска, чтобы получить необходимую форму.

Я делаю их окрашенными в зеленый контур и границу радиуса для лучшего понимания.

Полученный CSS выглядит следующим образом.

outline-width: 4px;
outline-style: solid;
outline-offset: -5px;
border-width: 0 0 5px;
border-style: solid;
outline-color: #fcfcfc;
border-color: rgba(153, 153, 153, 0.5);

Если у вас есть другие способы добиться этого.пожалуйста, напишите это.