Html中的Muller Lyer

我正在尝试在HTML中创建一个版本的（没有图像文件，因为我想创建line length变量）

这是我到目前为止所拥有的；它具有正确的元素，但工作不正常。最好的方法是什么

.arrow {
  border: solid black;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 40px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

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

.line {
  flex-grow: 1;
  height: 2px;
  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 transparent;
}

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

label {
  margin: 0 15px;
}

---

我使用了您的基本cde，并试图简化一些。 看看这个。这就是你要找的吗？ 使用旋转边框的“缺点”是箭头比container div长，这就是我添加一些边距的原因。 最好的解决办法可能是使用

.line容器{
利润率：80px；
宽度：400px；
高度：100px；
位置：相对位置；
}
.阿罗{
位置：绝对位置；
边框：纯黑；
边框宽度：0 8px 8px 0；
高度：100px；
宽度：100px；
}
.好的{
右：16px；
}
.遗漏{
左：16px；
}
.好的{
左：-120px；
}
.左{
右：-120px；
}
.对{
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
.左{
变换：旋转（135度）；
-webkit变换：旋转（135度）；
}
.线路{
宽度：100%；
边框顶部：8px纯黑；
位置：绝对位置；
最高：50%；
左：0；
}

---

我使用了您的基本cde，并试图简化一些。 看看这个。这就是你要找的吗？ 使用旋转边框的“缺点”是箭头比container div长，这就是我添加一些边距的原因。 最好的解决办法可能是使用

.line容器{
利润率：80px；
宽度：400px；
高度：100px；
位置：相对位置；
}
.阿罗{
位置：绝对位置；
边框：纯黑；
边框宽度：0 8px 8px 0；
高度：100px；
宽度：100px；
}
.好的{
右：16px；
}
.遗漏{
左：16px；
}
.好的{
左：-120px；
}
.左{
右：-120px；
}
.对{
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
.左{
变换：旋转（135度）；
-webkit变换：旋转（135度）；
}
.线路{
宽度：100%；
边框顶部：8px纯黑；
位置：绝对位置；
最高：50%；
左：0；
}

最简单的解决方案是使用图片并将其包装到一个div容器中，其值为：

objectfit:fill

然后提升或缩小div宽度，图像将水平拉伸或折叠。最简单的解决方案，无需太多编码或使用伪元素，但长度仍然是可变的。但是，如果您想以复杂的方式完成，只需使用SVG即可。最简单的解决方案是使用图片并将其包装到一个div容器中，该容器的值为：

object-fit:fill

然后提升或缩小div宽度，图像将水平拉伸或折叠。最简单的解决方案，无需太多编码或使用伪元素，但长度仍然是可变的。但是，如果你想用复杂的方式来做，只需使用SVG。这看起来很神奇，非常感谢@Yanou！我有一些小问题，箭头与主水平线有点脱节。你有什么建议可以让它们像这个例子（跨浏览器）一样完全准确吗？我的技术是用

位置：相对的
/
位置：绝对的
将线条和箭头挂到线条容器上。这应该可以防止他们彼此移动。这看起来很神奇，非常感谢@Yanou！我有一些小问题，箭头与主水平线有点脱节。你有什么建议可以让它们像这个例子（跨浏览器）一样完全准确吗？我的技术是用
位置：相对的
/
位置：绝对的
将线条和箭头挂到线条容器上。这应该可以防止它们彼此移动。
<i class="arrow right"></i><div class="line-container"><span class="line arrow-left"></span><span class="line arrow-right"></span>
</div><i class="arrow left"></i>