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

话不多说，直接写代码，希望能够对大家有所帮助！

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

效果图如下：