如何用CSS实现单角倾斜+对角圆角渐变？解决伪元素遮挡文本问题

API 探路者

2026-6-22

如何用CSS实现如图所示的设计？

我尝试了多种方法，但伪元素的渐变会覆盖主文本。以下是我编写的代码：

span {
    border: 2px solid #FFC402;
    border-radius: 15px 0px 0px 15px;
    padding: 6px;
    font-size: 18px;
    display: inline-block;
    background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
    position:relative;
    box-sizing: border-box;
}

span:after{
      content:"";
      width: 15px;
      height:90%;
      position:absolute;
      right:-8px;
      top:-2px;
      background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
       transform: skew(-20deg);
       border-top: 2px solid #FFC402;
       border-right: 2px solid #FFC402;
       box-sizing: border-box
}

解决方案

问题核心是伪元素默认层级高于父元素内的文本，所以会覆盖内容。只需调整伪元素层级，并优化细节即可解决：

span {
    border: 2px solid #FFC402;
    border-radius: 15px 0 0 15px;
    padding: 6px 12px; /* 增加右侧内边距，避免文本贴近斜角 */
    font-size: 18px;
    display: inline-block;
    background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
    position: relative;
    box-sizing: border-box;
    color: #fff; /* 可选：让文本在渐变背景上更清晰 */
}

span:after{
    content: "";
    width: 18px;
    height: calc(100% + 4px); /* 匹配父元素边框总高度 */
    position: absolute;
    right: -10px;
    top: -2px;
    background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
    transform: skew(-20deg);
    border: 2px solid #FFC402;
    border-left: none; /* 去掉左侧边框，避免和父元素边框重叠 */
    box-sizing: border-box;
    z-index: -1; /* 关键：将伪元素置于文本下方 */
}