在行尾放置箭头或三角形

Question

我试图在输入表单的端侧用箭头（或三角形很好）复制这些线条的外观。此图片来自正在转换为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三角形或某种箭头的末尾。也许它无法完成。

非常感谢我就如何解决这个问题提出任何想法或指导。

Answer 1

你的解决方案非常接近，唯一的问题是我们无法使用：之后：添加箭头后。请参阅以下解决方案：）

我采取了不同的方法，并制作了两个不同的线跨度。在每个行跨度上，我使用：after将箭头添加到末尾。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您使用Bootstrap，您可以免费获得Glyphicons的一个子集，它们包含许多箭头类（以及其他内容）。

http://getbootstrap.com/components/

您可以从他们的CDN（内容分发网络）链接Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如果您不需要JavaScript组件，您只需链接到上面的bootstrap.min.css链接并跳过可选主题和JavaScript。

然后将该类应用于空跨度以显示glyphicon。有一个列表，列出了网站上相应类名的可用内容。

<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>

您可以使用：after语法将这些通过css添加到现有元素中，只需要深入了解Bootstrap css文件并找到您要使用的图标的相应代码，例如上面的内容：

glyphicon-字形右

:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

glyphicon-字形左

:after {
    font-family: 'Glyphicons Halflings';
    content: "\ e079";
}