常用技巧

创建一个三角

将一个box的宽高都设置为0，分别设置三个边框的值，三角朝向的位置的边框不要设置，两侧的设置为透明，最后就能得到一个由最后的边框构成的三角形：

/* 三角形：用 border 实现 */
    .triangle {
      width: 0;
      height: 0;
      /* 初始红色：下三角（border-bottom 设颜色，其他透明） */
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red; /* 红色初始值 */
      transition: border-color 0.3s ease; /* 过渡动画，优化体验 */
    }