话不多说，直接写代码，希望能够对大家有所帮助！
1.html代码如下：
<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="usetohover"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="triangle_border_right"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ball"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="triangle_border_up rotate-back"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>2.css代码如下：
<span style="color: #800000;">.triangle_border_right</span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">0 !important</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
border-width</span>:<span style="color: #0000ff;"> 7px 0 8px 11px</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 27px 10px 0 0</span>;<span style="color: #ff0000;">
border-style</span>:<span style="color: #0000ff;">solid</span>;<span style="color: #ff0000;">
border-color</span>:<span style="color: #0000ff;">transparent transparent transparent #333</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">透明 透明 透明 灰</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;">relative</span>;
}<span style="color: #800000;">
.usetohover:hover > .triangle_border_right </span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotate(90deg)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;">rotate(90deg)</span>;<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;">rotate(90deg)</span>;<span style="color: #ff0000;">
-webkit-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-moz-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-ms-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-o-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> transform 1s</span>;
}<span style="color: #800000;">
.ball </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 123px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> rgba(255,214,71,0.5)</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 25px 25px 0 0</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
z-index</span>:<span style="color: #0000ff;"> 10</span>;
}<span style="color: #800000;">
.triangle_border_up </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 10px 0 0 17px</span>;<span style="color: #ff0000;">
border-width</span>:<span style="color: #0000ff;"> 0 8px 10px</span>;<span style="color: #ff0000;">
border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
border-color</span>:<span style="color: #0000ff;"> transparent transparent #333</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;
}<span style="color: #800000;">
.rotate-back </span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotate(0deg)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> rotate(0deg)</span>;<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> rotate(0deg)</span>;<span style="color: #ff0000;">
-webkit-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-moz-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-ms-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
-o-transition</span>:<span style="color: #0000ff;"> transform 1s</span>;<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> transform 1s</span>;
}效果图如下：
