Curved Box Cutouts in CSS

2025年5月6日

Curved Box Cutouts in CSS – Frontend Masters Blog , shows a trick to create the illusion of an element appended to another with a gap and curved edges at the corners.

inner只需要加边框，trick在于作者用了两个径向渐变的小背景图，把outer的两个尖角盖掉了。

如果删掉inner元素，可以看到outer实际是这样的。

不过既然能这样，那能不能干脆把outer左上角全干掉……会把inner挡住吗
outline和border的区别：最主要的是outline边框不占用空间，而border是算在盒模型里的。

在这放个demo：

📌

像个便签……
五一假期已离我远去……

<link href="curve.css" rel="stylesheet" type="text/css">
<div class="outer"><div class="inner" onclick="alert('貌似可以做个亮暗切换或者拷贝，点赞等功能按钮，或者小框内放个头像')">📌</div>
<section>
    <ul>
        <li>像个便签……</li>
        <li>五一假期已离我远去……</li>
    </ul>
</section>
</div>

.outer {
  margin-top: 20px;
  width: 375px;
  aspect-ratio: 1;

  /* border radius */
  --r: 12px;

  /* width, height, and outline of smaller box */
  --w: 60px;
  --h: 60px;
  --o: 8px;

  /* offset and size of the radial-gradient images */
  --ofs: calc(-1 * var(--o));
  --sz: calc(var(--r) + var(--o));
  --img: radial-gradient(circle at right bottom, transparent var(--r), #faf8f1 var(--r));

  border-radius: var(--r);
  background-image: var(--img), var(--img);
  background-position: var(--ofs) var(--h), var(--w) var(--ofs);
  background-size: var(--sz) var(--sz);
  background-repeat: no-repeat;
  background-color: #205781;
  color: #F6F8D5;

  .inner {
    width: var(--w);
    height: var(--h);
    line-height: var(--h);
    outline: var(--o) solid #faf8f1;
    border-radius: inherit;
    background: #98D2C0;
    cursor: pointer;
    &:hover {
      background-color: #4F959D;
    }
    text-align: center;
  }
}