如何使用CSS为卡片添加角标横幅？现有代码无法实现效果原因排查

原有代码无法实现的原因 #

• CSS属性书写错误：rotate: 60% left: 属于无效语法，rotate属性取值应为角度单位（如45deg），不存在cut-corners这个原生CSS属性，同时代码中属性未正确用分号分隔，浏览器无法识别解析。
• 尺寸设置不合理：.feature-banner宽高设置过窄过小，无法完整容纳"Featured!"文本内容。
• 缺少定位规则：没有为角标和父容器设置定位属性，无法将角标固定到卡片右上角的目标位置。
• 父容器缺少基础样式：.container没有设置宽高、背景、边框等卡片基础属性，也没有设置position: relative作为子元素绝对定位的参照物。

修复后的实现代码 #

CSS代码 #

.wrapper-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

/* 卡片容器基础样式 */
.container {
    overflow: hidden;
    width: 300px;
    height: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    position: relative; /* 作为角标的定位参照物 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 角标横幅样式 */
.feature-banner{
    position: absolute;
    right: -40px; /* 偏移到右上角外侧，配合父容器overflow:hidden隐藏超出部分 */
    top: 20px;
    width: 180px;
    padding: 6px 0;
    background: #e74c3c;
    color: #fff;
    text-align: center;
    transform: rotate(45deg); /* 旋转45度形成斜向横幅 */
    font-size: 14px;
    font-weight: 500;
}

HTML代码 #

<body> 
      <div class="wrapper-flex">
        <div class="container">
          <div class="feature-banner">Featured!</div>
          <!-- 此处可添加卡片其他内容 -->
        </div>
      </div>
    </body>

实现说明 #

• 利用父容器position: relative + 角标position: absolute实现固定位置定位，通过右偏移+旋转实现右上角斜向效果
• 父容器设置overflow: hidden自动裁剪角标超出容器的部分，不需要额外实现切角效果
• 可以根据需求调整transform的角度值、right和top的偏移量、角标背景色等属性适配不同的设计需求。

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