clip-path实现渐变提示框实例页面

展示

代码

• HTML：

  <ui-tips>感谢大家</ui-tips>
  <ui-tips>感谢大家购买这本《CSS新世界》</ui-tips>
  <ui-tips>感谢大家购买这本《CSS新世界》，如果你觉得这本书还不错，欢迎推荐给身边的朋友</ui-tips>

• CSS：

  ui-tips {
      display: inline-block;
      max-width: 250px;
      padding: 10px 15px 26px;
      color: #fff;
      position: relative;
      z-index:0;
  }
  ui-tips::before,
  ui-tips::after {
      content: "";
      background: linear-gradient(45deg, deepskyblue, deeppink);
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      z-index: -1;
  }
  ui-tips::before {
      -webkit-clip-path: inset(0% 0% 16px round 6px);
      clip-path: inset(0% 0% 16px round 6px);
  }
  ui-tips::after {
      --clip-path: polygon(calc(2em + 18px) calc(100% - 16px), calc(2em + 9px) calc(100% - 6px), 2em calc(100% - 16px));
      -webkit-clip-path: var(--clip-path);
      clip-path: var(--clip-path);
  }