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

Question

我正在研究需要在线条边缘显示一个小圆圈类型节点的 css 东西。

标签： htmlcss

Answer 1

我得到了你的家人。

1) 让我们创建一些 CSS 圆圈。海拉很容易border-radius。

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

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

看看这个华丽的圆圈！

现在我们需要一些子节点。摩尔圈！此外，我们应该开始考虑定位这些圆圈。position: absolute? 嘘，你知道的！

<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;
}

看，我们基本上到了！

那么，边缘呢？我们如何连接这些？！？好吧，我们被标记为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);- 等等等等

击鼓

哦，当！下一个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>。

祝你好运。

哦，这是截图的来源。