css编写菜单前置图标效果

一、双色菱形

      #box {
   
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right: 10px solid #0077f7;
      }
      #box2 {
   
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left: 10px solid #4da0f9;
      }
      #box,#box2 {
   
        display: inline-block;
      }
      #colorfulPri{
   font-size:0;}

    <div id="colorfulPri">
      <span id="box