CSS实现带圆角的日历形状（Div内透明切角三角形）求助

嘿，我看你已经用CSS transform和伪元素做出了日历的雏形，不过边角尖锐和切角区域不透明的问题确实挺影响质感的，我来帮你优化一下方案！

核心思路 #

要实现带圆角的切角+透明镂空效果，单纯用纯色伪元素覆盖肯定不行，我们可以通过伪元素结合box-shadow和border-radius来模拟，既能保留切角的镂空透明，又能给边角加上圆润的弧度。

完整实现代码 #

HTML（保持你的结构不变）

<div class="date">
  <div class="date__month">April</div>
  <div class="date__day">20</div>
</div>

CSS（优化后的版本）

.date {
  position: relative;
  width: 120px;
  height: 140px;
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  border-radius: 8px; /* 整体的基础圆角 */
  overflow: hidden;
}

/* 右上角带圆角的透明切角 */
.date::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-bottom-left-radius: 8px; /* 切角的圆角弧度，和整体保持一致 */
  box-shadow: 0 0 0 20px #2c3e50; /* 用阴影填充日历背景色，模拟出切角的边界 */
  transform: rotate(90deg);
  transform-origin: top right;
}

.date__month {
  padding: 15px 0 5px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.date__day {
  font-size: 48px;
  font-weight: 700;
}

效果说明 #

1. 整体圆角：给.date设置border-radius，让日历的左上、左下、右下三个角都有圆润的弧度。
2. 透明切角+圆角：通过::before伪元素的border-bottom-left-radius实现切角的圆角，box-shadow则用来填充日历的背景色，伪元素本身是透明的，所以切角区域会透出页面的背景，完美实现镂空效果。
3. 你可以根据需求调整border-radius、切角的大小（修改伪元素的width/height），以及阴影的尺寸，来适配不同的设计风格。

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