Question

我想在CSS3中将我的圈子与他们之间的界限联系起来，但我不知道如何。

＆＃13;

.circle
{
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: orange;
    border: 2px black solid;
}

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

.circle
{
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: orange;
    border: 2px black solid;
  position: relative;
}

.circle:before {
  content: "";
  height: 5px;
  width: 20px;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
}

.circle.last:before {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

尝试添加这样的行div：

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

然后，您必须在css中正确定位它们。您可以制作一个非常小的固定高度和宽度，并在其上放置边框以形成一条线。

在CSS3中连接圈子

2 个答案: