The realization of triangle direction symbol of bootstrap

Implementation method:
With an empty inline block, the width height is set to 0, one side of the border is set to visible, the other three-sided border is set to transparent, and the border width, the visible border is rendered as a triangle.

Analog Code:
CSS section:

. caret-left > Span {display:inline-block;  width:0;  height:0;  Vertical-align:middle;  Margin-bottom:0.1em;  Border-right:0.4em dashed;  Border-top:0.4em solid Transparent; Border-bottom:0.4em solid Transparent;}. Caret-left:before {content: "";}.  Caret-right > span {display:inline-block;  width:0;  height:0;  Vertical-align:middle;  Margin-bottom:0.1em;  Border-left:0.4em dashed;  Border-top:0.4em solid Transparent; Border-bottom:0.4em solid Transparent;}. Caret-right:before {content: "";}.  Caret-up > span {display:inline-block;  width:0;  height:0;  Vertical-align:middle;  Margin-bottom:0.1em;  Border-bottom:0.4em dashed;  Border-left:0.4em solid Transparent; Border-right:0.4em solid Transparent;}. Caret-up:before {content: "";}.  Caret-down > span {display:inline-block;  width:0;  height:0;  Vertical-align:middle;  Margin-bottom:0.1em;  Border-top:0.4em dashed;  Border-left:0.4em solid Transparent; Border-right:0.4em Solid TranspaRent;}. Caret-down:before {content: "";} /* Auxiliary style */button {border-radius:3px;background-color: #FFF; border:1px solid;line-height:2em;min-width:2em;}

HTML section:

<button class= "Caret-left" ><span></span></button><button class= "Caret-right" >< Span></span></button><button class= "caret-up" ><span></span></button>< Button class= "Caret-down" ><span></span></button>

：

The realization of triangle direction symbol of bootstrap