如何创建对角线输入

Question

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

我知道如何制作颜色和所有东西但是 我不知道我是如何制作这样的边界的

＆＃13;

＆＃13;

SelectionMove[EvaluationCell[], Before, Cell];

＆＃13;

＆＃13;

＆＃13;

我添加到这个

Answer 1

使用skewX()。这会使一个元素沿着X轴倾斜给定的角度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你想让占位符在输入上直接包裹另一层并使其倾斜。然后将内部输入倾斜恰好相反的数量。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>