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