使用CSS3制作三角形小图标-小君君的博客

1.html代码如下：

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;
 }

效果图如下：