diff --git a/demo/js/case/combo/demo.bubble_combo.js b/demo/js/case/combo/demo.bubble_combo.js
index c314e0724f..3eb3c7e6c9 100644
--- a/demo/js/case/combo/demo.bubble_combo.js
+++ b/demo/js/case/combo/demo.bubble_combo.js
@@ -49,17 +49,70 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }]
         });
+
+        var combo3 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
+        var combo4 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
         BI.createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
                 el: combo1,
-                left: 100,
-                top: 100
+                left: 10,
+                top: 10
             }, {
                 el: combo2,
-                left: 100,
-                bottom: 100
+                left: 10,
+                bottom: 10
+            }, {
+                el: combo3,
+                right: 10,
+                bottom: 10
+            }, {
+                el: combo4,
+                right: 10,
+                top: 10
             }]
         });
     }
diff --git a/dist/base.css b/dist/base.css
index 574471aab5..7e4dca7482 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -73,73 +73,219 @@
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {
diff --git a/dist/bundle.css b/dist/bundle.css
index e23adadff9..a894039188 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -2120,73 +2120,219 @@ textarea {
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {
diff --git a/dist/bundle.js b/dist/bundle.js
index 1487e10708..60777edef1 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -67187,22 +67187,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -67210,7 +67210,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {
diff --git a/dist/case.js b/dist/case.js
index 0a374c37ce..fb45aacc0c 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -4908,22 +4908,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -4931,7 +4931,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {
diff --git a/dist/demo.js b/dist/demo.js
index 240e7dd97e..9ff8f22463 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -1823,17 +1823,70 @@ BI.shortcut("demo.tree_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
                 }
             }]
         });
+
+        var combo3 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
+        var combo4 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
         BI.createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
                 el: combo1,
-                left: 100,
-                top: 100
+                left: 10,
+                top: 10
             }, {
                 el: combo2,
-                left: 100,
-                bottom: 100
+                left: 10,
+                bottom: 10
+            }, {
+                el: combo3,
+                right: 10,
+                bottom: 10
+            }, {
+                el: combo4,
+                right: 10,
+                top: 10
             }]
         });
     }
diff --git a/dist/fineui.css b/dist/fineui.css
index 0db9e54fbc..7384a260cf 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -2120,73 +2120,219 @@ textarea {
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {
diff --git a/dist/fineui.js b/dist/fineui.js
index a31f5cf72c..cb68136c7b 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -68951,22 +68951,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -68974,7 +68974,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {
diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js
index 553cb63ec3..c6368d5ad5 100644
--- a/src/case/combo/bubblecombo/combo.bubble.js
+++ b/src/case/combo/bubblecombo/combo.bubble.js
@@ -168,22 +168,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -191,7 +191,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {
diff --git a/src/css/base/combo/combo.bubble.css b/src/css/base/combo/combo.bubble.css
index 563755f015..ca19f81701 100644
--- a/src/css/base/combo/combo.bubble.css
+++ b/src/css/base/combo/combo.bubble.css
@@ -1,35 +1,108 @@
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
diff --git a/src/css/base/combo/combo.css b/src/css/base/combo/combo.css
index 20b5289b81..0494bed90e 100644
--- a/src/css/base/combo/combo.css
+++ b/src/css/base/combo/combo.css
@@ -1,37 +1,110 @@
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {
diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less
index 0077c0af33..62fd26bb1e 100644
--- a/src/less/base/combo/combo.bubble.less
+++ b/src/less/base/combo/combo.bubble.less
@@ -3,21 +3,26 @@
 .bi-bubble-combo {
   & .button-combo-triangle-wrapper {
     position: fixed !important;
+    .z-index-layer(@zIndex-popup);
   }
   & .bubble-combo-triangle-left {
     z-index: 1;
-    .solid-triangle-right(@color-bi-background-highlight);
+    .triangle-right();
+    //.solid-triangle-right(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-right {
     z-index: 1;
-    .solid-triangle-left(@color-bi-background-highlight);
+    .triangle-left();
+    //.solid-triangle-left(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-top {
     z-index: 1;
-    .solid-triangle-down(@color-bi-background-highlight);
+    .triangle-bottom();
+    //.solid-triangle-down(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-bottom {
     z-index: 1;
-    .solid-triangle-up(@color-bi-background-highlight);
+    .triangle-top();
+    //.solid-triangle-up(@color-bi-background-highlight);
   }
 }
\ No newline at end of file
diff --git a/src/less/visual.less b/src/less/visual.less
index a5fbd7e877..e93022841b 100644
--- a/src/less/visual.less
+++ b/src/less/visual.less
@@ -176,15 +176,15 @@
 .triangle-top() {
   position: absolute;
   width: 16px;
-  height: 10px;
-  border-bottom: 1px solid #f5f5f5;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
 
   &:before {
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
-    border-bottom: 10px solid #ccc;
+    border-bottom: 7px solid #ccc;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     content: "";
@@ -194,7 +194,7 @@
     right: 1px;
     top: 1px;
     bottom: 0px;
-    border-bottom: 9px solid #f5f5f5;
+    border-bottom: 6px solid #ffffff;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     content: "";
@@ -205,23 +205,79 @@
   position: absolute;
   width: 16px;
   height: 10px;
-  border-top: 1px solid #f5f5f5;
+  border-top: 1px solid #ffffff;
 
   &:after {
     position: absolute;
     right: 1px;
-    top: -1px;
-    border-top: 9px solid #f5f5f5;
+    top: 0px;
+    border-top: 6px solid #ffffff;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     content: "";
   }
   &:before {
     position: absolute;
-    border-top: 10px solid #cccccc;
+    border-top: 7px solid #cccccc;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     content: "";
   }
 
+}
+
+.triangle-left() {
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #ffffff;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+}
+
+.triangle-right() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #ffffff;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
 }
\ No newline at end of file