使用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; }
效果图如下:
推荐阅读
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
-
学习使用 CSS3 制作网站面包屑导航效果_html/css_WEB-ITnose
-
使用HTML5和CSS3制作一个模态框的示例
-
基于CSS3制作的鼠标悬停动画菜单_html/css_WEB-ITnose
-
使用CSS制作Heart动画_html/css_WEB-ITnose
-
CSS3 动画制作学习(一)_html/css_WEB-ITnose
-
前端小tips,纯css3各方向小三角的制作原理_html/css_WEB-ITnose
-
石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose
-
使用Axure RP原型设计实践03,制作一个登录界面的原型_html/css_WEB-ITnose