css 画六边形，三角形，消息框

1. css 画一个虚线的六边形
   • 思路:
     1. 先画一个虚线的长方形只有上下边框
     2. 再画两个只有上线上右边框的正方形
     3. 调整角度，定位到长方形的两边

   .hexagon-box {
      width: 100px;
      height: 32px;
      line-height: 32px;
      border-top: 1px dashed rgba(255, 255, 255, .3);
      border-bottom: 1px dashed rgba(255, 255, 255, .3);
      position: relative;

      &::before {
        content: '';
        position: absolute;
        background-color: transparent;
        top: 4px;
        left: -12px;
        width: 22px;
        height: 23px;
        transform: rotate(45deg);
        border-bottom: 1px dashed rgba(255, 255, 255, .3);
        border-left: 1px dashed rgba(255, 255, 255, .3);
      }
      &::after {
        content: '';
        position: absolute;
        background-color: transparent;
        top: 4px;
        right: -12px;
        width: 22px;
        height: 23px;
        transform: rotate(45deg);
        border-top: 1px dashed rgba(255, 255, 255, .3);
        border-right: 1px dashed rgba(255, 255, 255, .3);
      }
    }

虚线六边形

2. 实线消息框

• 思路:
  1. 先画一个长方形的消息框
  2. after/before 分别画两个三角形
  3. 把 after 画的三角形定位到 before 画的三角形后面，遮盖这它调整位置，根据想要的边框的宽度，调整两个三角形的间距

  .message-box {
      width: 118px;
      height:  40px;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius:  6px;
      position: relative;
      &::before {
        content: '';
        top: -10px;
        left:  49px;
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid rgba(255, 255, 255, .3);
      }
      &::after {
        content: '';
        top: -9px;
        left:  49px;
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #363351;
      }
    }

实线消息框.png

3. 虚线消息框

• 思路:
  1. 先画一个虚线的长方形
  2. 利用 after 伪类画一个正方形，只有上右或下左边框，利用 transform 旋转角度，把背景颜色设置和外面的背景颜色相同，就可以了。

    @dotted: rgba(255, 255, 255, .3);
    .message-box {
      width: 118px;
      height: 40px;
      border: 1px dashed @dotted;
      border-radius: 6px;
      position: relative;
     
      &::after {
        content: '';
        top: -7px;
        left: 54px;
        position: absolute;
        width: 10px;
        height: 10px;
        transform: rotate(135deg);
        border-width:0 0 1px 1px;
        border-color: @dotted;
        border-style: dashed;
        background-color: #33314e;
      }
    }

虚线消息框