是否可以使用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>