如何在css中矩形的交点处制作曲线？答案

【问题标题】：How to make a curve at intersection point on a rectangle in css?如何在css中矩形的交点处制作曲线？
【发布时间】：2021-12-31 23:06:16
【问题描述】：

我想创建以下形状：

重要提示：如果我使用“边界半径”，它适用于边缘，但我需要在交点处有一条曲线（我不想要这个结果）：

提前致谢

【问题讨论】：

标签： css geometry css-shapes curve

【解决方案1】：

您可能会使用一些伪元素来“切入”容器。

body {
  background: gray;
}

.cont {
  position: relative;
  height: 300px;
  width: 200px;
  background: dimgray;
  border-radius: 30px;
}

.cont:before,
.cont:after {
  content: "";
  position: absolute;
  right: 0;
  height: 40px;
  width: 20px;
  background: gray;
  border-radius: 40px 0 0 40px;
}

.cont:before {
  top: 25%;
}

.cont:after {
  bottom: 25%;
}

.spoke {
  position: absolute;
  left: 100%;
  height: 20px;
  width: 20px;
  top: 25%;
  border-radius: 50%;
  background: #222;
  transform: translate(-50%, 50%);
}

.spoke:after {
  content: "";
  position: absolute;
  left: 100%;
  top: calc(50% - 2px);
  height: 4px;
  width: 100px;
  background: inherit;
}

<div class="cont">
  <div class="spoke"></div>
</div>

或者，您可以保持容器原样，并为您的“辐条”添加边框：

body {
  background: gray;
}

div {
  position: relative;
  height: 300px;
  width: 200px;
  background: dimgray;
  border-radius: 30px;
}

div:before {
  content: "";
  position: absolute;
  right: -20px;
  height: 20px;
  width: 20px;
  background: #222;
  border: 10px solid gray;
  border-radius: 50%;
  top: 25%;
}

div:after {
  content: "";
  position: absolute;
  left: 100%;
  height: 4px;
  width: 100px;
  background: #222;
  top: calc(25% + 18px);
}

<div>
</div>

【讨论】：