办法一

bootstrap 就是如此

• 利用 border 来实现2个三角形
• 将三角形叠在一起，实现一个类似的效果。

代码：

<div class="arrow-top"></div><div class="arrow-right"></div><div class="arrow-bottom"></div><div class="arrow-left"></div>

<style>
.arrow-top,.arrow-bottom,.arrow-left,.arrow-right {
    display:inline-block;
    border:solid 15px #06c;
}
.arrow-top {
     border-top:0;
    border-left-color:transparent;
    border-right-color:transparent;
}
.arrow-bottom {
     border-bottom:0;
    border-left-color:transparent;
    border-right-color:transparent;
}
.arrow-left {
     border-left:0;
    border-top-color:transparent;
    border-bottom-color:transparent;
}
.arrow-right {
     border-right:0;
    border-top-color:transparent;
    border-bottom-color:transparent;
}
</style>

办法二

sofish 的想法有意思

• 创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
• 利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案

/* 兼容解决方案：菱形 */
.diamond{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865475,
    M12=-0.7071067811865477,
    M21=0.7071067811865477,
    M22=0.7071067811865475,
    SizingMethod='auto expand'
);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform:rotate(45deg);
}
:root .diamond{filter:none9;}

/* Tips 组件 */
.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
.tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px9;left:10px;}