如何裁剪红色Today Div超出Special Div的部分以实现书签效果？

嘿，这个书签样式的效果其实用CSS就能轻松实现，我给你两种靠谱的方案，你可以根据自己的布局来选～

方案1：使用CSS clip-path 精准裁剪 #

这个方法直接裁剪Today元素的形状，让它在Special Div的位置形成书签的缺口，适合固定尺寸和位置的布局。

示例代码 #

HTML结构

<div class="wrapper">
  <div class="special">Special Div</div>
  <div class="today">Today</div>
</div>

CSS样式

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 20px;
}

.special {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100px;
  background: #ffffff;
  border: 1px solid #cccccc;
  z-index: 2; /* 确保Special在Today上方 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.today {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* 关键：用clip-path定义书签形状的可见区域 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% 20px, 
    calc(100% - 150px) 20px, 
    calc(100% - 150px) 0, 
    calc(100% - 150px) 100%, 
    0 100%
  );
}

原理说明 #

clip-path的多边形路径精准定义了Today的可见区域：

• 从左上角到右上角，再往下到书签尖角的高度（20px）
• 然后连接到Special Div的左边缘位置（calc(100% - 150px)对应Special的宽度）
• 最后沿着Special的左边缘到底部，再回到左下角，形成完整的书签形状。

方案2：使用伪元素模拟缺口（适配动态布局） #

如果Special Div的尺寸或位置是动态变化的，clip-path的固定数值就不太灵活，这时候可以用伪元素模拟缺口，适配性更强。

示例CSS样式（HTML结构和方案1一致） #

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 20px;
}

.special {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100px;
  background: #ffffff;
  border: 1px solid #cccccc;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.today {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden; /* 隐藏伪元素超出的部分 */
}

.today::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px; /* 和Special宽度一致 */
  height: 100%;
  background: #ffffff; /* 和父容器背景色一致，模拟被裁剪的效果 */
  /* 用clip-path做出书签的尖角 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}

原理说明 #

通过在Today元素上添加一个伪元素，用和父容器一致的背景色覆盖Special上方的Today区域，同时给伪元素裁剪出一个尖角，形成书签的视觉效果。如果Special的尺寸变化，只需要调整伪元素的width即可。

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