Css 圈中的半圈

Question

我有一个带双边框的圆圈。我需要像下面这样的半圆（带箭头的部分）。

我创建了一个内圈并将其定位为绝对。但我无法在第一个圆圈中正确绘制该形状。我的结果是这样的。 :/

我该怎么办？边框必须是另一个 div 或者我可以直接绘制那个形状吗？

提前致谢。

我的第一圈代码：

**.circle** {
border: 6px solid #F8DADA;
box-shadow:
inset 0 0 0 6px #F5A6A7;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
margin-top: 40px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: #F25858;
display: table;
position: relative;
}

对于内圆或形状：

**.inner-circle** {
position: absolute;
border-radius: 50%;
height: 70px;
width: 70px;
top: 95%;
left: 50%;
margin: -35px 0px 0px -35px;
box-shadow: inset 8px 35px 0 0px #E44D52;
}

更新：

所有解决方案都运行良好，但 Chrome 使用内圆解决方案每隔几秒执行一次。但就在我的项目中。不适用于第一个答案 (:after) 或 fiddle 示例。我想这是一种 chrome 错误。

更新解决方案：

在第一圈"z-index:0"解决了最后一个问题。

Answer 1

将插图更改为普通框阴影并交换了它们之间的颜色。并在伪选择器之后使用。

.circle{
      border: 6px solid #F5A6A7;
      box-shadow:0 0 0 6px #F8DADA;
      -webkit-background-clip: padding-box; /* for Safari */
      background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
      margin-top: 40px;
      border-radius: 50%;
      width: 150px;
      height: 150px;
      background-color: #F25858;
      display: table;
      position: relative;
      overflow:hidden;
      opacity: 0.99;
      z-index:999
}
.circle:after{
      content:'BE';
      text-align:center;
      position: absolute;
      border-radius: 50%;
      color:#fff;
      box-sizing:border-box;
      padding-top:10px;
      height: 70px;
      width: 70px;
      bottom: -38px;
      left: 26%;
      box-shadow: inset 8px 35px 0 0px #E44D52;
}

<div class="circle">

</div>

Answer 2

试试这个：

注意：如果你想在 IE、Firefox 中支持你的代码，你必须删除 display: table;

.bigCir {
border: 12px solid #F8DADA;
text-align: center;
border-radius: 50%;
width: 150px;
height: 150px;

}

.circle {
border-radius: 50%;
width: 100%;
height: 100%;
background-color: #F25858;
box-shadow:0 0 0 6px #F5A6A7;
position: relative;
overflow: hidden;

}  

.inner-circle {
position: absolute;
border-radius: 50%;
height: 70px;
width: 70px;
top: 100%;
left: 50%;
margin: -35px 0px 0px -35px;
box-shadow: inset 8px 35px 0 0px #E44D52;
color: #FFF;
font-size: 24px;
}

<div class="bigCir">
    <div class="circle">
        <div class="inner-circle">↓</div>
    </div>
</div>

Answer 3

您可以使用 background-color 和 radial-gradient。

箭头的一个元素和一个伪元素。

div {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 2em auto;
  border: 6px solid #F5A6A7;
  box-shadow: 0 0 0 6px #F8DADA;
  -webkit-background-clip: padding-box;
  /* for Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
  background-color: #F25858;
  background-image: radial-gradient(circle at 50% 100%, red 20%, transparent 20%);
  position: relative;
}

div::after {
  position: absolute;
  bottom: 10px;
  left: 50%;
  content: '93';
  font-size: 1.25em;
  transform: translateX(-50%);
  color: white;
  transition: bottom .25s ease;
}

div:hover::after {
  bottom: 5px;
}

<div></div>

Css 圈中的半圈

Half Circle in Circle with Css

html

css

css-shapes