带底线的CSS3三角形

Question

是否可以使用 CSS3 ??

绘制如下所述的下述对象

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

请指教。

Answer 1

HTML：

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

CSS：

.arrow {
    height: 0;
    width: 0;
    border-bottom: 8px solid #FF0000;
    border-left: 16px dotted transparent;
    border-right: 16px dotted transparent;
    left: 0px;
    top: 2px;
    margin-left: 20px;
    z-index: 1;
    position: relative;
}
.line {
    width: 200px;
    height: 2px;
    background: #FF0000;
}

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

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

CSS：

.fill {
    position: relative;
    left: -14px;
    top: 2px;
    height: 0;
    width: 0;
    border-bottom: 6px solid #ffffff;
    border-left: 14px dotted transparent;
    border-right: 14px dotted transparent;
    z-index: 2;
}

HTML：

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

Answer 2

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

<强> HTML：

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

<强> CSS：

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

现场演示 http://jsfiddle.net/85saaphw/