如何用css实现边框上的小箭头？

话不多说，上效果图：

其实原理很简单，利用css伪类before和after即可。

.con {
      background: white;
      border: 1px solid #D9E0E6;
      padding: 20px;
      position: relative;
      border-radius: 3px;
      width: 400px;
    }

    .con::after {
      display: block;
      content: "◆";
      position: absolute;
      font-size: 26px;
      left: 105px;
      bottom: 24px;
      color: white;
    }
/*注意：此处::before的content要比::after的bottom高1px，就形成了箭头视觉效果了*/
    .con::before {
      display: block;
      content: "◆";
      position: absolute;
      font-size: 26px;
      left: 105px;
      bottom: 25px;
      color: #D9E0E6;
    }

这种方式可以灵活的控制箭头的方向以及位置。