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

Posted 2023-03-06

【中文标题】不完整的圆，中间有一条线

【英文标题】：Incomplete circle with line in the middle

【发布时间】：2016-05-17 06:21:00

【问题描述】：

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

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

【问题讨论】：

不是这样的。

你应该改用 SVG

嗨，您找到解决问题的方法了吗？答案有帮助吗？

【参考方案1】：

您可以使用 CSS 来做到这一点，但它确实不是最好的方法。它将需要添加无意义的标记，可能还有很多 CSS。 如果您不想使用图像，我建议您使用 inline SVG 更好地控制您想要实现的形状。

使用 SVG：

我用path element 和arc commands 做了这个简单的例子：

svg
  display:block;
  width:30%; height:auto;

bodybackground: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- 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;  

bodybackground:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;

<div></div>

【参考方案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>

【参考方案3】：

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

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

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;

<div></div>