html - 带底线的 CSS3 三 Angular 形

Question

是否可以使用 CSS3 绘制下面提到的对象？？

(中间的三 Angular 形，三 Angular 形的左右两侧底部有一条线)。

请多多指教。

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>