链接

//梯形
.trapezoid{
    width: 40px;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #3483ea;
}

• linear-gradient实现对角线

  // 从左上到右下的对角线
  background-image: linear-gradient(
    to top right,
    transparent 0%,
    transparent calc(50% - 1px),
    #ededef 50%,
    transparent calc(50% + 1px),
    transparent 100%
  );
  
  

• 进度条

  .loading {
      width: 100px; height: 100px;
      border-radius: 50%;
      background: conic-gradient(deepskyblue, 30%, white);
      --mask: radial-gradient(closest-side, transparent 75%, black 76%);
      -webkit-mask-image: var(--mask);
      mask-image: var(--mask);
      animation: spin 1s linear infinite reverse;
  }
  @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  

  原理很简单，Loading图像其实就是一个锥形渐变，只是使用了CSS遮罩属性只让外圈25%的范围显示，于是loading的圆环效果就出现了。 -webkit-mask-image 的值应该是一张，背景是透明色的图，或者说有透明色，而透明色的区域，最后都是不显示的。

• 打点动画

<button>订单提交中<span class="dotting"></span></button>

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    margin-right: 8px;
    box-shadow: 2px 0, 6px 0, 10px 0;
    animation: dot 4s infinite step-start both;
}
@keyframes dot {
    25% { box-shadow: none; }          /* 0个点 */
    50% { box-shadow: 2px 0; }         /* 1个点 */
    75% { box-shadow: 2px 0, 6px 0; }  /* 2个点 */ 
}