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

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

如何用 CSS 来做这个?

【问题讨论】:

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

标签: html css css-shapes


【解决方案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);
}
<div class="circleThing"></div>

【讨论】:

    【解决方案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%;
    }
    <div class="circle"></div>

    【讨论】:

      猜你喜欢
      • 2016-01-21
      • 1970-01-01
      • 1970-01-01
      • 2023-03-18
      • 1970-01-01
      • 2014-04-20
      • 1970-01-01
      • 1970-01-01
      • 2017-05-30
      相关资源
      最近更新 更多