如何使用CSS为四个摘要区块实现四角小弧形边框？

你需要为四个摘要区块添加四角小弧形边框，当前仅通过:before和:after伪元素实现了右上角和左下角的直角边框，以下是调整后的方案，可实现四角弧形边框效果：

核心思路 #

利用两个伪元素结合多重阴影，分别处理两组对角的弧形边框：

• :before 负责左上角和右下角的弧形边框
• :after 负责右上角和左下角的弧形边框
  通过border-radius实现弧形，再用box-shadow生成对称位置的边框，仅需两个伪元素即可完成四角装饰。

完整代码示例 #

修正后的CSS代码

/* 通用区块基础样式，统一复用 */
.summary-part {
  text-align: center;
  padding: 1rem;
  margin: 1rem 2rem 0;
  border-radius: 10px;
  position: relative;
}

/* 红色区块主题样式 */
.red-part {
  background-color: hsla(0, 100%, 67%, 0.1);
  color: hsla(0, 100%, 67%, 0.2); /* 伪元素边框颜色继承自此处 */
}
#reaction {
  color: hsl(0, 57%, 60%);
}

/* 橙色区块主题样式 */
.orange-part {
  background-color: hsla(39, 100%, 56%, 0.1);
  color: hsla(39, 100%, 56%, 0.2);
}
#memory {
  color: hsl(39, 57%, 60%);
}

/* 绿色区块主题样式 */
.green-part {
  background-color: hsla(166, 100%, 37%, 0.1);
  color: hsla(166, 100%, 37%, 0.2);
}
#verbal {
  color: hsl(166, 57%, 60%);
}

/* 蓝色区块主题样式 */
.blue-part {
  background-color: hsla(234, 85%, 45%, 0.1);
  color: hsla(234, 85%, 45%, 0.2);
}
#visual {
  color: hsl(234, 57%, 60%);
}

/* 内部元素布局样式 */
.section-item {
  display: inline-block;
  margin: 0 auto;
}

/* 四角弧形边框核心实现 */
.summary-part::before,
.summary-part::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
}

/* 左上角 + 右下角 弧形 */
.summary-part::before {
  top: 1px;
  left: 1px;
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 6px;
  /* 利用阴影生成右下角对称边框 */
  box-shadow: 
    calc(100% - 12px) calc(100% - 12px) 0 -11px transparent,
    calc(100% - 12px) calc(100% - 12px) 0 0 currentColor;
}

/* 右上角 + 左下角 弧形 */
.summary-part::after {
  top: 1px;
  right: 1px;
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 6px;
  /* 利用阴影生成左下角对称边框 */
  box-shadow: 
    calc(0 - 12px) calc(100% - 12px) 0 -11px transparent,
    calc(0 - 12px) calc(100% - 12px) 0 0 currentColor;
}

修正后的HTML代码

<div class="red-part summary-part section-item">
  <img src="./assets/images/icon-reaction.svg" alt="Reaction" class="section-item">
  <div class="section-item" id="reaction">Reaction</div>
  <div class="section-item">80</div>
  <div class="section-item" data-number="hundred"> / 100</div>
</div>
<div class="orange-part summary-part section-item">
  <img src="./assets/images/icon-memory.svg" alt="Memory" class="section-item">
  <div class="section-item" id="memory">Memory</div>
  <div class="section-item">92</div>
  <div class="section-item" data-number="hundred"> / 100</div>
</div>
<div class="green-part summary-part section-item">
  <img src="./assets/images/icon-verbal.svg" alt="Verbal" class="section-item">
  <div class="section-item" id="verbal">Verbal</div>
  <div class="section-item">61</div>
  <div class="section-item" data-number="hundred"> / 100</div>
</div>
<div class="blue-part summary-part section-item">
  <img src="./assets/images/icon-visual.svg" alt="Visual" class="section-item">
  <div class="section-item" id="visual">Visual</div>
  <div class="section-item">72</div>
  <div class="section-item" data-number="hundred"> / 100</div>
</div>

关键优化点 #

1. 样式复用：新增.summary-part和.section-item类，避免重复定义相同样式，简化代码维护。
2. 颜色统一：用currentColor继承区块主题色，确保边框颜色与区块背景色调匹配，减少冗余颜色值。
3. HTML规范修正：合并了重复的class属性，符合HTML语法要求。
4. 高效实现：仅通过两个伪元素结合阴影完成四角弧形，无需额外DOM元素。

内容的提问来源于stack exchange，提问作者Adri Vasarhelyi