一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

利用纯 CSS 创建一个三角形

时间:2014-04-03 编辑:简简单单 来源:一聚教程网

利用纯 CSS 创建一个三角形

首先当然是一个任意的空标签来当小三角,下边的 CSS 丢进去即可:

 代码如下 复制代码

.triangle{
 left:50%;
 margin-left:-5px;
 width:5px;
 height:5px;
 background:#FAFAFA;
 bottom:-4px;
 position:absolute;
 transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 border:1px solid #E5E5E5;
 border-top:none;
 border-left:none
}

代码利用 CSS3 的 2D 旋转属性对正方形进行旋转,并且隐藏掉顶部左右两边的边框就可以实现小三角了。

例子

 

 代码如下 复制代码






三种纯CSS实现三角形的方法





  我是利用 border 属性实现的
 

 


  我是利用 ◆ 字符实现的
 

 


  我是利用 css transfrom 属性实现的
 


热门栏目