如何使用CSS transform属性实现需求图所示的斜切蓝色边框效果

实现方案 #

参考效果图 #

• 需求效果图
  
• 当前实现效果图
  

修复后可直接运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标签样式修复</title>
  <style>
    .psudo {
      width: 300px;
      height: 80px;
      position: relative;
      background-color: #5f7dff;
      /* 需求要求的蓝色边框 */
      border: 2px solid #2563eb;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .psudo .name {
      color: #fff;
      font-size: 18px;
      margin: 0;
    }
    /* 右上角斜切角样式调整 */
    .psudo:after {
      content:"";
      position:absolute;
      border-width:40px;
      border-style:solid;
      border-color:#fff;
      border-right-color:transparent;
      border-left-color:transparent;
      border-bottom-color:transparent;
      z-index:1;
      top:0;
      right:0;
      transform:translateX(20px)
    }
    /* 右上角图标样式 */
    .corner-icon {
      position: absolute;
      top: 6px;
      right: 6px;
      color: #5f7dff;
      font-size: 18px;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="psudo">
    <h6 class="name">Customer</h6>
    <span class="corner-icon">👤</span>
  </div>
</body>
</html>

调整说明 #

• 修正了斜切角伪元素的边框宽度、偏移量参数，适配80px高的容器尺寸，斜切效果符合预期
• 新增蓝色边框样式，匹配需求图视觉要求
• 新增右上角用户图标定位逻辑，层级高于斜切伪元素保证显示正常
• 补充了容器内文本的对齐、边距样式，展示更规整

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