CSS3绕着另一个带有空格的圆圈

Question

我需要创建你在图片上看到的东西.我已经用圆圈创建了这条线,但是我遇到了黄色的问题,它应该有一个边界圆圈,中间有空格.

我已经用我已经拥有的步骤创造了一个小提琴,但黄色的是我的问题.欢迎任何建议! 的jsfiddle

我的HTML:

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

我的CSS:

.preview ul li {
    list-style-type: none;
    position: relative;
    width: 1px;
    margin: 0 auto;
    padding-top: 35px;
    background: #fff;
}

.preview ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: inherit;
}

.preview ul li.last {
    padding-top: 0;
}

.preview ul li.current:after {
    background: #fff934;
    border: 2px solid #fff934;
    box-shadow: 1px 1px 0px 5px black;
}

Answer 1

有一种更简单的方法可以做到这一点,而不需要额外的div内部li.您可以设置一个background使用background-clip: content-box-这样做是限制你的background内容区域,这意味着你background不会下方的显示padding或border区域中的内容外,如果这些是非零.然后你给你的元素一个非零padding和一个border.你将拥有background和border显示它们之间的透明空间由它们的大小决定padding.

ul {
  list-style: none;
  background: url(https://i.stack.imgur.com/SVlc8.jpg);
}

li {
  margin: .25em;
  border: solid 2px transparent;
  padding: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor content-box;
  color: #fff;
}

.current { border-color: currentColor; }

<ul>
  <li></li>
  <li class='current'></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

(有关更详细的解释和更多类似的例子,你可以查看我去年写的这篇文章background-clip)