如何在 CSS 中绘制半开线？ [关闭]

Question

右半开线段图片：

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

Answer 1

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

.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>