html：<span class="arrow">◆<span>◆</span></span>

css：

.arrow {

1. font-size: 16px;

2. line-height: 100%;

3. color: #c8c8c8;

4. position: absolute;

5. right: 330px;

6. bottom: -9px;  

}

arrow span {

          color: #ffffff;

1. position: absolute;

2. left: 0px;

3. bottom: 1px;

}

利用绝对定位让2个菱形重合，然后分别给2个菱形设置不同的颜色。第一个菱形根据需要颜色设置为深色，第二个菱形设置的颜色和上图背景色一样为白色即可

切换到搜狗输入法 中字右键-表情符号-符号大全里面基本所有符号都有 也包括你说的那两个 其他输入法估计也有 大同小异