Html 如何在不使用图像的情况下创建线

我试图在不使用图像的情况下创建下面的图表（显然没有ASCII字符和实线）。我该怎么做呢？我在想canvas，或者CSS3，除非有更好的

 \                       /
  \                     /
   ---------------------
  /                     \
 /                       \

如果形状只是为了“装饰”，你可以使用CSS3的边框技巧

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #1abc9c transparent;
}

#pentagon_two{
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #1abc9c transparent;
    transform: rotate(180deg);
}

---

有多种方法可以实现上述效果，下面提供了其中一些方法的片段。每个都有各自的优点和缺点，因此根据您的需求选择其中一个

使用CSS转换：

我们可以使用CSS透视变换和两个伪元素，每个伪元素大约是父元素高度的50%。伪元素相对于父元素绝对定位，其上的边界生成线。（用于定位

span

的方法只是随机的，您可以使用任何您觉得合适的方法。）

在设计响应性形状时，透视变换可能非常棘手。随着容器尺寸的变化，我们必须修改

边距

。否则部分形状将消失在视野之外。很难确定运行时的保证金值应该是多少

.shape{
位置：相对位置；
高度：100px；
宽度：200px；
利润率：20px；
}
.shape:after、.shape:before{
位置：绝对位置；
内容：''；
左：0px；
高度：计算（50%-1px）；
宽度：100%；
边框样式：实心；
}
.形状：以前{
排名：0；
边框宽度：0px 2px 1px 2px；
变换：透视（50px）旋转（-10度）；
变换原点：底部；
}
.形状：之后{
底部：0；
边框宽度：1px2px0px2px；
变换：透视（50px）旋转（10deg）；
变换原点：顶部；
}
跨度{
显示：块；
位置：绝对位置；
最高：50%；
}
跨度：第n个孩子（1）{
左：50%；
}
跨度：第n个孩子（2）{
左：50%；
转换：translateY（-100%）；
}
跨度：第n个孩子（3）{
左：0%；
转化：translateY（-50%）translateX（-150%）；
}
跨度：第n个孩子（4）{
右：0%；
转化：translateY（-50%）translateX（200%）；
}

1.
2.
3.
4.

取决于您想用它做什么。就目前而言，这个问题过于宽泛，无法正确回答。另外，SVG可能是一个不错的选择。我只想在水平线的顶部和底部以及图表的末端都有一个数字。Canvas和SVG都可以很容易地绘制线和所需的文本数字。@Catfish。你问了一个很好的问题，但是用“最好/最容易”这个词的问题注定要结束。具有讽刺意味的是，目前接近票数的人支持“过于宽泛”而不是“基于意见”，而你的问题定义得非常好和狭隘。我对你的问题进行了编辑，删除了那些吸引选票的字眼。顺便说一句，在画布中查看

moveTo

和

lineTo

命令。在SVG中，使用

M或M

和

L或L

命令检查路径子元素。