带半边框 CSS 的圆圈 [关闭]答案

【问题标题】：Circle with half border CSS [closed]带半边框 CSS 的圆圈 [关闭]
【发布时间】：2015-11-27 21:53:06
【问题描述】：

我正在尝试使用 CSS 创建一个圆圈，如下图所示：

如何用 CSS 来做这个？

【问题讨论】：

太好了。当您有具体问题时回来，向我们展示您的尝试。
你有 HTML 和 CSS 分享吗？
用问题编辑
在半圆上创建一个圆。

【解决方案1】：

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

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

&lt;div class="circleThing"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

然后添加一个带有截止到白色的线性渐变背景，然后你就会得到你想要的效果。

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

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

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：