Html 带底线的CSS3三角形

是否可以使用CSS3绘制如下所述的对象

（三角形的中间、左侧和右侧底部有一条直线）

请告诉我

HTML：

<div class="arrow"></div>
<div class="line"></div>

尺寸不完全相同，但您可以这样编辑和创建

编辑： 对于新形状，请在CSS和HTML中添加以下内容：

CSS:

HTML:

---

如果您需要三角形后面的背景透明：

HTML:

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -3px;
}

现场演示：

---

这些是克拉（^）和连字符（-）符号吗？然后--^--它可以在没有CSS的情况下编写。你能解释一下吗？@KunJ我已经更新了图片。看看这个使用css的tringle。

<div class="arrow">
    <div class="fill"></div>
</div>
<div class="line"></div>

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -3px;
}