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

Question

如何使用CSS实现这种形状:

理想情况下,我也喜欢背景阴影效果.

Answer 1

你可以用CSS做到这一点,但实际上并不是最好的方法.它需要添加非语义标记,可能需要添加很多CSS.
如果你不想使用图像,我建议使用内联SVG,控制像你想要实现的形状更好.

使用SVG:

我使用带有arc命令的path元素制作了这个快速示例:

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

<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>

使用CSS:

如果你真的想要使用CSS,我也用一种可能的方法制作了这个CSS示例.它只使用一个div和两个伪元素.线条由边框和边框半径组成:

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

<div></div>