-webkit-mask-box-image尺寸任意渐变提示框效果实例页面

展示

代码

• 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: 12px 15px 24px;
      color: #fff;
      background: linear-gradient(45deg, deepskyblue, deeppink);
      -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M170.667 85.333h682.666c46.934 0 85.334 38.4 85.334 85.334v512c0 46.933-38.4 85.333-85.334 85.333H682.667L512 938.667 341.333 768H170.667c-46.934 0-85.334-38.4-85.334-85.333v-512c0-46.934 38.4-85.334 85.334-85.334z'/%3E%3C/svg%3E") 10 10 20 40;  
  }