你的位置:首页 > 网页设计

[网页设计]使用CSS3制作三角形小图标


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

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

效果图如下: