CSS：弯角+延伸

Question

如何获取附件图片中的元素？

我需要一条线+曲线在右上方+扩展名。

如果可以的话，我可以使用div，span或其他想法。

我尝试使用2个带有圆形边框的div。但是它们在角落的连接方式不是很好。

Answer 1

我认为您的意思是角落里的圆点。更改的鲁棒性不是特别强，并且当前仅可在白色背景上使用。但是，有了一些SCSS和变量，它将更加整洁。

我遇到的最大问题是，要求周围的盒子有relative的位置，这可能会影响其他地方的布局。

.fancy {
  position: relative;
  padding: 12px;
  border: 3px solid #ccc;
  border-radius: 8px;
}

.fancy::after {
  position: absolute;
  bottom: -11px;
  left: -11px;
  content: "";
  height: 14px;
  width: 14px;
  display: inline-block;
  border: 4px solid white;
  border-radius: 11px;
  background-color: gray;
}

p {
  font-family: Arial;
  font-size: 14px;
}

<p class="fancy">
  Some text
</p>

点周围的填充由border-width（4px）给出。

点的颜色由background-color定义。

使用11px的位置由border-width + [height（或width）/ 2]计算得出，并用于保持圆点和角落。

您想要的东西有点模棱两可。如果您也想在其中添加标题栏，请添加以下内容：

.fancy {
  position: relative;
  padding: 12px;
  border: 3px solid #ccc;
  border-radius: 8px;
}

.fancy .title {
  display: table;
  margin-top: -2.2em;
  margin-bottom: 0.2em;
  padding: 6px 8px;
  border: 6px solid white;
  border-radius: 12px;
  background-color: #99ccff;
}

p {
  font-family: Arial;
  font-size: 14px;
}

<p class="fancy">
  <span class="title">A fancy title</span>
  Some text with a fancy title.
</p>