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

展示

代码

• 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;
      background: linear-gradient(45deg, deepskyblue, deeppink);
      border-radius: 6px 6px 0 0;
      --clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 2px) calc(100% - 18px), calc(100% - 6px) calc(100% - 16px), calc(15% + 18px) calc(100% - 16px), calc(15% + 9px) calc(100% - 6px), 15% calc(100% - 16px), 0 calc(100% - 16px), 6px calc(100% - 16px), 2px calc(100% - 18px), 0 calc(100% - 22px));
      -webkit-clip-path: var(--clip-path);
      clip-path: var(--clip-path);
  }