CSS3 を使用して小さな三角形のアイコンを作成する_html/css_WEB-ITnose

あまり言うことはありません。コードを書くだけです。皆さんのお役に立てれば幸いです。

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

レンダリングは次のとおりです: