Question

我正在研究CSS东西，我需要在线条的边缘显示一个小的圆形节点。

Answer 1

我让你成名。

1）让我们创建一些CSS圈子。 Hella 轻松border-radius。

<div class="circle"></div>

.circle {
    border: 5px solid black;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

看看这个美丽的圈子！

现在我们需要一些子节点。 沼泽圈 ！另外，我们应该开始考虑在这些圈子中的位置。 position: absolute？ Pssh ，你知道的！

<div class="circle"></div>
<div class="circle circle-small right-top"></div>
<div class="circle circle-small right-bottom"></div>

.circle {
    border: 5px solid black;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 100px;
    height: 100px;
}

.circle-small {
    border: 5px solid black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.right-top {
    top: 50px;
    left: 250px;
}
.right-bottom {
    top: 200px;
    left: 250px;
}

LOOK，我们基本上就在那！

那么边缘呢？我们如何连接这些？！好吧，我们分别标记了 CSS 和 HTML ，所以我们将尽力而为：生成内容！

Tangent：您可以通过一个div来做一些令人惊奇的事情：https://a.singlediv.com/

我要去::before，但是::after完全可以。

.right-top::before {
    border-top: 5px solid black;
    content: '';
    display: block;
    height: 100px;
    width: 65px;
    position: absolute;
    left: -36px;
    top: 46px;
    transform: rotate(-30deg);
}

让我们逐行细分这些！

border-top: 5px solid black;-我们的圈子有5px的边框。我喜欢乌龟，嗯-一致性。
content: '';-杜尔。
display: block;-原因，我们想稍后再定位！
height: 100px;-我一直在调整的四个值之一，直到看起来还不错（感谢Chrome开发工具！）
width: 65px;-^^^同上
position: absolute;-是的
left: -36px;-因此，我们的边框顶部已连接到圆圈
top: 46px;-与left
transform: rotate(-30deg);-等等等

DRUMROLL

OH DANG！下一个PLS：

.right-bottom::before {
    content: '';
    display: block;
    border-top: 5px solid black;
    width: 65px;
    height: 100px;
    position: absolute;
    left: -86px;
    transform: rotate(30deg);
    top: -14px;
}

它与right-top::before基本相同，只是我们调整了偏移量left/top/transform以获得...。此：

宝贝！

无论如何，我会选择SVG。或者，<canvas>。

祝你好运。

哦，这里是fiddle的屏幕截图的来源。

Answer 2

您可以尝试SVG stands for Scalable Vector Graphics。 SVG以XML格式定义了基于矢量的图形。

在HTML5中，您可以将SVG元素直接嵌入到HTML页面中。

这是圆圈的代码。

<!DOCTYPE html>
<html>
<body>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg> 
 
</body>
</html>

代码说明

<circle>元素用于绘制圆。
cx和cy属性定义圆心的x和y坐标。
如果未设置cx和cy，则圆的中心将设置为（0,0）。 r属性定义圆的半径笔触和笔触宽度属性控制形状轮廓的显示方式。
将圆的轮廓设置为“边界”。
fill属性是指圆圈内的颜色（我已经填充了透明色）。

如何在CSS中制作一个类似节点的小圆圈

2 个答案: