Input необычная форма

#html #css #css3

Добрый день. Подскажите как на input сделать такие углы ? на кнопке через before
и after , а вот адекватно input не знаю как сделать. Просто как фон сделать тоже не
хочется.
    

Ответы

Ответ 1

Суть решения в применении skewX для обрамляющего элемента и обратногоskewX для input. 

В этом примере border у div вокруг, а если наклонять только input то текст в них
тоже будет наклонен.



.input {
    width: 250px;
    height: 30px;
    padding: 0 10px;
    margin: 0 0 5px 20px;
    border: 1px solid black;
}

.input input {
  width: 100%;
  border: none;
  outline: none;
  padding: 6px 0 8px 5px;
  font-size: 14px;
  background-color: transparent;
}

.input.left,
.input.right input {
   transform: skewX(25deg);
}

.input.right,
.input.left input {
    transform: skewX(-25deg);
}