原理是利用::before的内容去定位遮挡::after的内容，不能全部遮挡完，预留和边框一样大的PX.

下面可以修改注释的‘控制位置PX’来定位上下左右，实现上下左右箭头。

  1. <style>
  2.     .con {
  3.         background: white;
  4.         border: 1px solid #D9E0E6;
  5.         padding: 20px;
  6.         position: relative;
  7.         border-radius: 3px;
  8.         width: 400px;
  9.     }
  11.     .con::after {
  12.         display: block;
  13.         content: "◆";
  14.         position: absolute;
  15.         font-size: 26px;
  16.         left: 105px;/*控制实心箭头处左边位置*/
  17.         bottom: 24px;/*控制实心箭头处底边位置*/
  18.         color: white;
  19.     }
  20.     /*注意：此处::before的content要比::after的bottom高1px，就形成了箭头视觉效果了*/
  21.     .con::before {
  22.         display: block;
  23.         content: "◆";
  24.         position: absolute;
  25.         font-size: 26px;
  26.         left: 105px;/*控制空心箭头处左边位置*/
  27.         bottom: 25px;/*控制空心箭头处底边位置*/
  28.         color: #D9E0E6;
  29.     }
  30. </style>
  31. <div class="con"></div>