圆形半边框CSS

Question

我正在尝试使用CSS创建一个圆圈，它看起来与下图完全相同：

如何使用CSS制作？

Answer 1

我能想到的最简单的方法是在灰色border-radius上使用div制作圆圈，并将黑色边框应用于两个相邻的边。然后，您可以简单地旋转元素，使边框位于顶部。

＆＃13;

＆＃13;

div.circleThing {
    width:100px; height:100px;
    background:#666;
    border:10px solid black;
    border-radius:50%;
    border-bottom-color:#fff;
    border-right-color:#fff;
    transform: rotate(45deg);
}

＆＃13;

<div class="circleThing"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不想旋转元素，另一种可能的替代方法是使用放置在其父元素后面的伪元素。

然后添加一个截止为白色的线性渐变背景，然后您就可以获得所需的效果。

这确实需要更多的CSS并且稍微困难一点，但是你得到了没有旋转元素的好处。

if ($(e.target).is('[data-toggle=modal]')) {
        $($(e.target).data('target')).modal()
}

.circle {
  width: 130px;
  height: 130px;
  background: grey;
  margin: 10px;
  border-radius: 50%;
  position: relative;
}
.circle:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  display: block;
  margin: -10px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 1) 100%);
  border-radius: 50%;
}