如何创建对角输入

Question

我想创建这样的对角线输入：

我知道我是如何制作颜色和每样东西的，但是我不知道我是如何制作那样的边框的

#nameinp{
 border-right:5px #4d0026 solid;
 border-left:none;
 border-bottom:none;
 border-top:none;
 background-color:#e6e6e6;
 width:140px;
 height:25px;
 text-align:center;
 font-size:17px;
}

我添加的内容

Answer 1

使用 skewX()。这会将元素沿 X 轴倾斜给定角度。

#nameinp{
 border-right:5px #4d0026 solid;
 border-left:none;
 border-bottom:none;
 border-top:none;
 background-color:#e6e6e6;
 width:140px;
 height:25px;
 text-align:center;
 font-size:17px;
  -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

<input type="text" id="nameinp"/>

如果您希望占位符在输入上直接包裹另一层并倾斜 it.Then 将内部输入倾斜完全相反的量。

#nameinp {
  border-right: 5px #4d0026 solid;
  border-left: none;
  border-bottom: none;
  border-top: none;
  background-color: #e6e6e6;
  width: 140px;
  text-align: center;
  font-size: 17px;
  -ms-transform: skewX(20deg);
  /* IE 9 */
  -webkit-transform: skewX(20deg);
  /* Safari */
  transform: skewX(20deg);
}

#nameinp input {
  height: 25px;
  width: 128px;
  background: #e6e6e6;
  -ms-transform: skewX(-20deg);
  /* IE 9 */
  -webkit-transform: skewX(-20deg);
  /* Safari */
  transform: skewX(-20deg);
  border: none;
}

<div id="nameinp">
  <input type="text" placeholder="Enter" />
</div>

Answer 2

这是另一种解决方案，它扭曲了外部 <span> 而不是内部 <input>

它仍然不完美，但它不会扭曲输入字段中的文本或占位符。

.skewed {
  border: 1px solid transparent;
  border-right: 5px solid #4d0026;
 background-color:#e6e6e6;
  display: inline-block;
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
}

.skewed > input {
  border: none;
  background-color: transparent;
  font-size: 17px;
 height: 25px;
  margin: 0 5px;
 text-align :center;
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
 width: 140px;
}

<span class="skewed"><input type="text" id="nameinp" placeholder=""/></span>

如何创建对角输入

How to create diagonal inputs

html

css