矩形边框的CSS形状半圆对齐问题答案

【问题标题】：CSS shape semicircle alignment problem with border of rectangle矩形边框的CSS形状半圆对齐问题
【发布时间】：2021-07-24 09:53:04
【问题描述】：

我想使用 CSS 创建一个形状。我面临的唯一问题是半圆与矩形边框的对齐方式无法正常工作。我附上了我到目前为止所做的事情的图像。谁能帮我解决这些对齐问题。谢谢。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

    #talkbubble {
      width: 120px;
      height: 80px;
      border: 4px solid #4C4C4C;
      position: relative;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }

    #talkbubble:before {
      content: "";
      position: absolute;
      top: 42%;
      left: -11.6px;
      width: 30px;
      height: 15px;
      border: 4px solid #4C4C4C;
      border-bottom: none;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px; 
      background-color: white;
      transform: rotate(90deg);
      box-sizing: border-box;
    }

  #talkbubble:after {
        content: "";
        position: absolute;
        top: 42%;
        right: -12px;
        width: 30px;
        height: 15px;
        border: 4px solid #4C4C4C;
        border-bottom: none;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background-color: white;
        transform: rotate(270deg);
        box-sizing: border-box;
      }

&lt;div id="talkbubble"&gt;&lt;/div&gt;

【问题讨论】：

嗯，但是当我运行代码时我根本没有看到这个问题
@coder 如果你放大一点并检查半圆和矩形边框之间的对齐，你会看到它。您还会在其上看到浅色边框
尝试增加::before和::after的宽度一点点，它对我有用

标签： html css

【解决方案1】：

我会用一个元素做不同的事情：

.ticket {
  width:300px;
  height:200px;
  border-radius:20px;
  border:8px solid;
  background:
    radial-gradient(circle 38px at right,#000 95%,#0000),
    radial-gradient(circle 38px at left ,#000 95%,#0000);
  background-origin:border-box;
  -webkit-mask:
    radial-gradient(circle 30px at right,#0000 95%,#000) right,
    radial-gradient(circle 30px at left ,#0000 95%,#000) left;
  -webkit-mask-size:51% 100%;
  -webkit-mask-repeat:no-repeat;
}

&lt;div class="ticket"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以添加溢出隐藏以防万一，和一个完整的圆圈？

.ticket-outer {
  overflow: hidden;
  height: 150px;
  width: 300px;
  margin: 50px auto;
}

.ticket {
  border: 5px solid #000;
  border-radius: 20px;
  height: 150px;
  width: 300px;
  position: relative;
  box-sizing: border-box;
}

.ticket::before,
.ticket::after {
  content: '';
  width: 50px;
  height: 50px;
  border: 5px solid #000;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  z-index: 2;
}

.ticket::after {
  left: auto;
  right: -30px;
}

<div class="ticket-outer">
<div class="ticket"></div>
</div>

【讨论】：