如何创建对角线输入答案

【问题标题】：How to create diagonal inputs如何创建对角线输入
【发布时间】：2018-11-08 23:44:51
【问题描述】：

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

我知道如何制作颜色和所有东西，但我不知道我是怎么做这样的边框的

#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;
}

我添加的内容

【问题讨论】：

检查是否有帮助：stackoverflow.com/questions/16825042/…

标签： html css

【解决方案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);
}

&lt;input type="text" id="nameinp"/&gt;

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

#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>

【讨论】：

你知道我怎样才能让占位符保持稳定
@SohaibKrim 更新了答案。请检查

【解决方案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;
}

&lt;span class="skewed"&gt;&lt;input type="text" id="nameinp" placeholder=""/&gt;&lt;/span&gt;

【讨论】：