如何创建带切角且支持border-radius的侧边栏矩形形状？

直接用CSS mask 属性可以同时实现切角效果和圆角，不需要复杂的伪元素或clip-path组合，以下是完整实现代码：

HTML结构 #

<div class="sidebar">
  <!-- 侧边栏内容 -->
  <p>侧边栏内容示例</p>
</div>

CSS样式 #

.sidebar {
  width: 280px;
  height: 600px;
  background: #2c3e50;
  border-radius: 0 12px 12px 0; /* 右侧上下圆角 */
  /* 用mask实现右上角切角，同时保留圆角 */
  mask: 
    linear-gradient(135deg, transparent 15px, #000 15px) top right,
    linear-gradient(#000, #000);
  mask-size: 15px 15px, 100% 100%;
  mask-repeat: no-repeat;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: 
    linear-gradient(135deg, transparent 15px, #000 15px) top right,
    linear-gradient(#000, #000);
  -webkit-mask-size: 15px 15px, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  padding: 20px;
  color: white;
}

方案说明 #

• border-radius 负责设置常规的圆角（示例中为右侧上下两个角）
• mask 属性通过两个渐变图层叠加：第一个小渐变在右上角生成15px的切角，第二个渐变填充剩余区域，既保留圆角又实现切角效果
• 调整 15px 的数值可改变切角大小，修改 border-radius 的值可调整圆角半径
• 若需要调整切角位置，只需修改渐变的方向参数（比如bottom right可设置右下角切角）

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