使用CSS3制作三角形小图标

Posted 2020-07-02 小君君的博客

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

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

效果图如下：