由css设计的对角文本框边框

Question

任何人都可以帮我设置一个文本框边框，就像只用css一样在图像中。我尝试过以下css但不能完美地工作

.addfolder-input {
    border: medium none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 10px;
    border-top: 0;
   border-right: 0;
   border-bottom: solid 2px #3c5a9a;
   border-left: 0;
   border-radius:5px;
}

Answer 1

这是一种可能的方法，在文本框周围使用容器元素，然后将一个绝对定位的伪元素添加到容器中，该容器沿着X轴旋转一点透视。

沿着X轴以透视方式旋转使得矩形看起来好像当我们从矩形的底部到顶部时它们彼此远离。伪元素的顶部边框无效，因为我们不需要它。

应该将文本框所需的width设置为容器，因为伪元素和文本框都从它们的容器中导出它们的宽度（100％）。

.addfolder-input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin-bottom: 20px;
  width: 100%;
  padding: 0 10px;
  border: none;
  outline: none;
}
.container {
  position: relative;
  width: 100px;
}
.container:after {
  position: absolute;
  content: '';
  bottom: 48%;
  left: 6px;
  width: 100%;
  height: 6px;
  border: 2px solid #3c5a9a;
  border-top: none;
  -webkit-transform: perspective(10px) rotateX(-10deg);
  -moz-transform: perspective(10px) rotateX(-10deg);
  transform: perspective(10px) rotateX(-10deg);
}

<div class="container">
  <input type="text" class="addfolder-input" value="Type Something..."/>
</div>

---

这是另一种使用多种背景，线性渐变和背景定位的替代方案。这也可以工作，但在某些浏览器中，角度边缘/边框变得有点锯齿状。

.addfolder-input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin-bottom: 20px;
  width: 85%;
  padding: 0 10px;
  border: none;
  outline: none;
  position: relative;
  left: 6px;
}
.container {
  position: relative;
  width: 120px;
}
.container:after {
  position: absolute;
  content: '';
  bottom: 48%;
  left: 6px;
  width: 100%;
  height: 6px;
  background: -webkit-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(-45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(0deg, transparent 9%, #3c5a9a 9%, #3c5a9a 95%, transparent 11%) no-repeat;
  background: -moz-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -moz-linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), -moz-linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
  background: linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;  
  background-position: 0px 6px, 107px 6px, 0px 4px;
}

<div class="container">
  <input type="text" class="addfolder-input" value="Type Something..." />
</div>