CSS - 在圆形和矩形的交点处删除边框答案

【问题标题】：CSS - Removing border at the intersection of a circle and a rectangleCSS - 在圆形和矩形的交点处删除边框
【发布时间】：2022-01-25 20:49:53
【问题描述】：

如何删除矩形和圆形相交处的边框，如下所示：

我尝试过使用口罩，但无法让它发挥作用，也许我可以得到一些帮助？

编辑：我已经设法做类似that 的事情，但我找不到删除边框的方法，我尝试使用 Laaouatni 发布的答案，但他使用圆圈的背景来摆脱边框，唯一的问题是我需要圆圈是透明的。

.circle {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: .4em solid grey;
}
.levels {
  border: .4em solid grey;
  width: 15em;
  height: 1em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -7.5em;
  border-radius: 2em;
}

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

编辑：我找到了一种使用面具和一些小技巧来制作它的方法 https://jsfiddle.net/fg18h7yt/如果有人想要这样的东西

【问题讨论】：

我认为最好的解决方案是在圈子中使用border-bottom: none;，不确定是否有效，我会尝试
为什么不为此使用 SVG 形状？

标签： html css

【解决方案1】：

我建议使用 SVG 而不是 HTML 和 CSS。有很多工具。此外，许多在线网站可以帮助您设计 SVG 并直接在 HTML 代码中使用它们。更多信息：https://www.w3schools.com/graphics/svg_intro.asp

无论如何，这可以通过 CSS 和使用 CSS 的 pseudo-elements 和 overflow 属性来实现。更多信息：https://www.w3schools.com/css/css_pseudo_elements.asp

对于在span 中创建的圆圈::before 元素。真正的圆圈::before 和跨度高度是限制高度并用overflow:hidden 隐藏圆圈的一部分。

对于底部，span 的顶部边框被移除，::before 和 ::after 元素创建了两条线。

.circle {
    width: 5.8em;
    height: 5em;
    overflow:hidden;
    position: absolute;
    bottom: 1em;
    left: 50%;
    margin-left: -2.9em;
}

.circle::before{
    display:block;
    content:'';
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: .4em solid grey;
    
}

.levels {
    border: .4em solid grey;
    border-top:0;
    width: 15em;
    height: 1em;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -7.9em;
    border-radius: 2em;
    
}

.levels::before, .levels::after{
    display:block;
    content:'';
    border: 0 solid grey;   
    border-width:0.4em 0 0 0.4em;   
    height:100%;
    width: 5.5em;
    border-radius: 2em 0 0 2em;
    margin:0 -0.4em 0 -0.4em;
    float:left;
}

.levels::after{
    border-width:0.4em 0.4em 0 0;
    border-radius: 0 2em 2em 0;
    float:right;
}

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

【讨论】：

【解决方案2】：

你可以使用border-bottom: none;

或 border-bottom: ColorOfBackground 在这种情况下 White 在您的 CIRCLE 中

    background-color: white;
    border-bottom: 0.5em solid white;

在 RETTANGLE transform: translateY(-2.1em); 中使 div 上升（如此相交）

body {
  display: grid;
  height: 100vh;
  place-content: center;
}

.container {
  display: grid;
  place-items: center;
}

.container div {
  background: transparent;
  border: 0.5em solid black;
}

.container .circle {
  height: 10em;
  width: 10em;
  border-radius: 50%;
  background-color: white;
  border-bottom: 0.5em solid white;
  z-index: 1;
}

.container .rectangle {
  border: 0.5em solid black;
  height: 2em;
  width: 30em;
  transform: translateY(-2.1em);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="circle"></div>
    <div class="rectangle"></div>
  </div>
</body>

</html>

【讨论】：

感谢您的回答，但我需要使圆圈透明，所以我认为这种方法对我没有帮助，看看我的编辑，也许你可以帮助我，谢谢。