前端新手求助：如何为网站制作精致特殊边角？

你想要的是上下色块衔接处右上角的内凹圆角效果，调整代码如下就能实现：

完整代码 #

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee; /* 增加背景色方便观察效果 */
}

.container {
  background-color: white;
  border-radius: 15px;
  overflow: hidden; /* 关键：裁剪容器内超出的元素 */
}

.box {
  text-align: center;
  font-size: 50pt;
  padding: 2rem; /* 给内容添加内边距，避免紧贴边缘 */
  position: relative;
  color: white; /* 文字设为白色，提升可读性 */
}

#top {
  background-color: blue;
}

#top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background: white; /* 与容器背景色一致，形成凹角效果 */
  border-top-left-radius: 100%; /* 左上角圆角，实现右下角内凹 */
}

#bottom {
  background-color: red;
  margin-top: -50px; /* 向上移动半圆高度，与上方凹角衔接 */
  padding-top: calc(2rem + 50px); /* 补回移动的高度，保证内容位置正常 */
}

<div class="container">
  <div class="box" id="top">Top</div>
  <div class="box" id="bottom">Bottom</div>
</div>

关键调整说明 #

• 容器裁剪：给.container加overflow: hidden，确保伪元素超出的部分被隐藏，不会破坏整体圆角。
• 凹角实现：利用#top的伪元素，用白色背景和左上角全圆角，放在右下角，模拟出蓝色块的内凹效果。
• 色块衔接：通过负margin-top让红色块向上移动，刚好填补凹角的空白区域，同时用padding-top补偿高度，避免内容被遮挡。
• 细节优化：添加文字颜色和内边距，提升整体视觉体验。

内容的提问来源于stack exchange，提问作者Abdullah Sheikh