倾斜一个角并使用渐变向对角添加边框半径

Question

如何在 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
}

Answer 1

在对代码进行了一些修改之后，这似乎可行。你将不得不摆弄渐变以使其继续下去而不会出现奇怪的中断，老实说，仅使用图像可能会更容易，但仍然如此。如果我对你的要求的解释是正确的，那么它就像添加一些 padding-right 并使高度占据 105% 而不是 90 一样简单：

           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;
              padding-right : 15px;
            }
            span:after{
              content      : "";
              width        : 15px;
              height       : 105%;
              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>T</span>