是否可以使用css3绘制下面提到的对象??
(三角形的中间、左边和右边的三角形底部有一条线)。
请告诉我。

最佳答案

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>

07-24 09:44
查看更多