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

效果图如下:

时间: 2024-10-10 09:08:15

使用CSS3制作三角形小图标的相关文章

如何制作icon-font小图标

1.首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式). 2.打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App如下图: 3.上面有一个紫色的 Import Icons 点击上传你下好的 SVG 图标. 4.上传好的 SVG 图标会显示在下方的 Untitled Set 中,然后选择上方有个类似 笔 形状的图标,点击进入编辑.解释一下上面的选择器..鼠标箭头 表示 选择图标 .垃圾桶 表示 删除图标 ,一般选择垃圾桶,

总结几个小图标实现方法

前言:页面总是时不时会出现小图标,就来总结一些自己知道的实现方法,应用情况依靠场景大家自行参考吧. (一)雪碧图 CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 特点:相对于单个小图标,它节省了文件体积和服务请求次数.主要是因为将所有的零碎的小图片整合在一起,可以有效的减少http对图片的请求次数,不需要多次加载零碎的背景图片,所以合理的利用它可以有效的提高网页的加

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

[转]网站地址栏小图标favicon.ico的制作方法

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件. 虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟

精美的HTML5/CSS3表单 带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式.需要高版本的浏览器才能支持. 你也可以在这里在线演示 下面我们来简单分析一下这款表单的源代码,源代码由HTML代码.CSS代码及Javascript代码组成.一共3组样式,我们只对其中一组作解说. HTML代码: <ul data-for="prefix&

用CSS3实现带小三角形的div框(不用图片)

用CSS3实现带小三角形的div框(不用图片) 现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移背景图片法,那么今天就不用图片,用CSS3实现一下,下面我们来看一下实现代码. 首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用 假如html代码是这样的 <div class="arrow-up">

css 制作三角形图标 不支持IE6

.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(0, 224, 255, 1); border-right: 4px solid rgb(0, 255, 10); border-top: 4px solid #ff0; border-bottom: 4px solid #ca0309; } 效果: 把10px改成0后: 去掉border-top这一句: 把border-lef

基于CSS3飘带状3D菜单 菜单带小图标

这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线预览   源码下载 实现的代码. htmll代码: <nav> <menu> <li><a href="#"><span>t</span> <span>twi

CSS3实现三角形和对话框

这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形  总结:三角形是由设置宽度高度为0,由边框构成的正方形,分别设置边框四个边的样式,得到四个三角形拼凑在一起的效果,再设置其他方向上的边框颜色为透明色. 1.首先先做一个正方形,这个正方形不是一般的元素加上背景颜色实现的,而是对一个元素将其长和宽都设置0px,这样就相当于盒子的内容区消失.content:"