css - 将箭头或三 Angular 形放在行尾

Question

我正在尝试在输入表单的末端复制带有箭头(或三 Angular 形很好)的线条外观。此图像来自正在转换为 HTML5 的旧 Flash 应用程序:

我已经得到了这样的输入字段周围的线条:

HTML

<form action="">
    <div class="line">
        <label>Cab Width = 
            <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
        </label>
    </div>
</form>

CSS

.line {
  display: flex;
  flex: 1;
  width: 100%;
  margin: 20px auto;
  line-height: 1em;
}
.line:before, .line:after {
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(black, black);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

但是我不知道如何在这个末尾添加一个 CSS 三 Angular 形或某种箭头。也许做不到。

对于我如何解决这个问题的任何想法或指导，我将不胜感激。

Answer 1

您的解决方案非常接近，唯一的问题是我们无法使用 :after:after 添加箭头。请参阅以下解决方案:)

我采用了不同的方法，制作了两条截然不同的线段。在这些行跨度中的每一个上，我都使用 :after 将箭头添加到末端。

.line-container {
  display: flex;
  width: 100%;
  margin: 20px auto;
  align-items: center;
}

.line {
  flex-grow: 1;
  height: 1px;
  background: black;
  position: relative;
}

.line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -10px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.line.arrow-left:after {
  position: absolute;
  content: '';
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

label {
  margin: 0 15px;
}

<form action="">
  <div class="line-container">
    <span class="line arrow-left"></span>
    <label>Cab Width =
      <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
    </label>
    <span class="line arrow-right"></span>
  </div>
</form>