Как создать перекрывающуюся границу с разными цветами и шириной / высотой на элементе ввода?

Question

В настоящее время я работаю над веб-приложением перетаскивания с помощью vue.js. В этом приложении у нас есть несколько специально разработанных границ для входного HTML-элемента.

Конструкции выглядят следующим образом: (игнорируем серыйвертикальная линия. Это рисуется динамически)

Я пробовал что-то вроде создания дочернего элемента div, сделав его немного больше входного, установите его с z-index позадивход и установить цвет.Но проблема в том, что светло-голубые границы справа и слева всегда будут занимать 100% высоты.Мне нужно что-то вроде 75% или 80%.

Граница «перекрытия» также может быть сверху, справа или слева на элементе

Кто-нибудь знает, как лучше всего решить эту проблему в ответ?

Answer 1

Граница-изображение с градиентом - это то, что вам нужно:

input {
  border:2px solid;
  padding:10px;
  background:pink;
}
.one {
  border-image:linear-gradient(to right, red 80%,blue 0) 2;
}
.two {
  border-image:linear-gradient(to bottom,red 70%,blue 0) 2;
}

<input type="text" class="one">

<input type="text" class="two">

Answer 2

Я бы, вероятно, стилизовал оберточный элемент и добавил бы к нему элементы псевдо.

Answer 3

Вы можете использовать: after и: before для границ, охватывающих оставшиеся 20%.

<div><input value="Text"/></div>

CSS:

input {
  padding:20px;
  border: 5px solid lightblue;
  border-bottom: 5px solid gray;
  position:relative;
  display:block;
}
div:before {
  content:' ';
  width:5px;
  height: 14px;
  background:gray;
  position:absolute;
  display:block;
  bottom:0;
  left:0;
  z-index:999;
}
div:after {
  content:' ';
  width:5px;
  height: 14px;
  background:gray;
  position:absolute;
  display:block;
  bottom:0;
  right:0;
  z-index:999; 
}
div {position: relative;width:fit-content;}

См. Пример: https://codepen.io/MistaPrime/pen/XWryOOy