用html+CSS一条直线两边带三角箭头表示两点之间的距离
时间: 2024-05-15 12:17:26 浏览: 79
DIV+CSS通过border样式制作带箭头提示框效果
可以使用CSS的border属性和transform属性来实现这个效果,具体代码如下:
HTML代码:
```
<div class="line"></div>
```
CSS代码:
```
.line {
width: 200px;
height: 0;
border-bottom: 1px solid #000;
position: relative;
}
.line::before,
.line::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: -8px;
}
.line::before {
border-width: 8px 8px 0 0;
border-color: #000 transparent transparent transparent;
left: 0;
transform: rotate(-135deg);
}
.line::after {
border-width: 8px 0 0 8px;
border-color: #000 transparent transparent transparent;
right: 0;
transform: rotate(135deg);
}
```
在这段代码中,我们首先创建了一个div元素作为一条直线,通过设置它的border属性来实现线条效果。然后,我们使用伪类::before和::after来创建三角箭头,通过设置它们的border属性和transform属性,使它们成为两个对角线方向的三角形,并定位在直线的两端。最终,我们得到了一条带有三角箭头的直线,可以用来表示两点之间的距离。
阅读全文