如何在CSS中绘制半开线？

Question

右半开线段图：

如何在CSS中绘制这条线？带有响应式水平线部分。我找到了 How can I make a pointy arrow with a div in CSS and https://css-tricks.com/examples/ShapesOfCSS，但我没有技能来连接这些。

Answer 1

您可以使用一个元素和一个伪元素 :before 使用 Flexbox

创建它

.line {
  width: 150px;
  height: 2px;
  background: black;
  margin: 50px;
  display: flex;
  align-items: center;
}
.line:before {
  content: '';
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
}

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

如何在CSS中绘制半开线？

How to draw half-opened line in CSS?

css

line

draw

responsive-design