不完整的圆圈，中间有一条线

Question

如何使用CSS实现此形状：

理想情况下，我也喜欢背景阴影效果。

Answer 1

你可以用CSS做到这一点，但它确实不是最好的方法。它需要添加非语义标记，可能需要添加很多CSS 如果您不想使用图片，我建议您使用inline SVG，控制您想要实现的形状会更好。

使用SVG：

我使用path element与arc commands：

制作了这个简单的示例

＆＃13;

＆＃13;

svg{
  display:block;
  width:30%; height:auto;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}

＆＃13;

<svg viewbox="0 0 10 10">
  <path d="M4.5 1 A4.05 4.05 0 0 0 4.5 9z M8.4 3 A4.05 4.05 0 0 0 5.5 1 V9 A4.05 4.05 0 0 0 8.4 7" 
        stroke-width="0.8" fill="transparent" stroke="#000"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

使用CSS：

如果你真的想使用CSS，我也用一种可能的方法制作了这个CSS示例。它只使用一个div和两个伪元素。这些线条用边框和border-radius制作：

＆＃13;

＆＃13;

div {
  position: relative;
  width: 100px;
  padding-bottom: 100px;
  border-radius: 50%;
}
div:before,div:after {
  box-sizing: border-box;
  content: '';
  width: 48%;
  height: 100%;
  position: absolute;
  border: 10px solid #000;
}
div:before {
  border-radius: 900px 0 0 900px;
}
div:after {
  right: 0;
  border-radius: 0 35px 35px 0;
  border-right-color:transparent;  
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个CS的可能性

.test {
  width: 200px;
  height: 200px;
  border: solid 10px black;
  border-radius: 50%;
  border-right-color: transparent;
  background-image: linear-gradient(90deg, transparent 85px, black 85px, black 115px, transparent 115px);
  position: relative;
}

.test:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 10px;
  margin: auto;
  background-color: white;
  top: -10px;
  bottom: -10px;
}

<div class="test"></div>

Answer 3

这是另一个CSS替代方案，它只使用一个伪元素来创建形状的额外一面。

after创建具有部分透明边框（右侧）的额外曲线。

＆＃13;

＆＃13;

body {
  background: skyblue;
}
div {
  width: 50px;
  height: 100px;
  border: 10px solid black;
  border-radius: 75px 0px 0px 75px;
  position: relative;
  box-sizing: border-box;
}
div:after {
  content: '';
  top: -10px;
  width: 50px;
  height: 100px;
  border-width: 10px;
  border-style: solid;
  border-right-color: transparent;
  border-radius: 0px 39px 39px 0px;
  position: absolute;
  left: 45px;
  box-sizing: border-box;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;