使用CSS3制作三角形小图标_html/css_WEB-ITnose
程序员文章站
2024-01-18 11:29: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制作写轮眼开眼及进化过程[转]_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
css3圆角边框制作方法_html/css_WEB-ITnose
-
使用CSS3伸缩盒实现图片垂直居中_html/css_WEB-ITnose
-
CSS3制作苹果手机的Message图标,超强大_html/css_WEB-ITnose
-
HTML5实践-使用css创建三角形和使用CSS3创建3d四面体的代码详解
-
使用纯css制作简易步骤流程_html/css_WEB-ITnose
-
使用HTML CSS制作简易三角形和旗帜
-
使用 CSS & jQuery 制作一款漂亮的多彩时钟_html/css_WEB-ITnose