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）或小提琴例子。我猜这是一种铬虫。

更新解决方案：

在第一个圈子中，“z-index：0”解决了最后一个问题。

Answer 1

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

＆＃13;

.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:'\25BE';
      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;
}

＆＃13;

<div class="circle">

</div>

＆＃13;

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。

执行此操作

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

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: '\2193';
  font-size: 1.25em;
  transform: translateX(-50%);
  color: white;
  transition: bottom .25s ease;
}

div:hover::after {
  bottom: 5px;
}

<div></div>

圆圈中的半圆与Css

3 个答案: