欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用CSS3制作三角形小图标_html/css_WEB-ITnose

程序员文章站 2022-05-03 21:06:28
...
话不多说,直接写代码,希望能够对大家有所帮助!

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

效果图如下: