当前位置:16教程网 > 网页设计 > DIV+CSS教程 >

CSS三角箭头应用实践
栏目分类:DIV+CSS教程   发布日期:2016-09-18   浏览次数:次   发布:www.16jiaocheng.com

用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)

  用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)

  这类效果也可以用图片背景来实现,代码会更简洁

  CSS代码:

  CSS Code复制内容到剪贴板

  div.container{position:absolute;

  top:30px;

  left:40px;

  font-size: 9pt;

  display:block;

  height:100px;

  width:200px;

  background-color:transparent;

  *border:1px solid #666;

  }

  s{

  position:absolute;

  top:-20px;

  *top:-22px;

  left:20px;

  display:block;

  height:0;

  width:0;

  font-size: 0;

  line-height: 0;

  border-color:transparent transparent #666 transparent;

  border-style:dashed dashed solid dashed;

  border-width:10px;

  }

  i{position:absolute;

  top:-9px;

  *top:-9px;

  left:-10px;

  display:block;

  height:0;

  width:0;

  font-size: 0;

  line-height: 0;

  border-color:transparent transparent #fff transparent;

  border-style:dashed dashed solid dashed;

  border-width:10px;

  }

  .content{

  border:1px solid #666;

  -moz-border-radius:3px;

  -webkit-border-radius:3px;

  position:absolute;

  background-color:#fff;

  width:100%;

  height:100%;

  padding:5px;

  *top:-2px;

  *border-top:1px solid #666;

  *border-top:1px solid #666;

  *border-left:none;

  *border-right:none;

  *height:102px;

  box-shadow: 3px 3px 4px #999;

  -moz-box-shadow: 3px 3px 4px #999;

  -webkit-box-shadow: 3px 3px 4px #999;

  /* For IE 5.5 - 7 */

  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');

  /* For IE 8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";

  }

  HTML代码:

  XML/HTML Code复制内容到剪贴板

  

 

  

 

  
这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^

  

 

  

  

  

  

 

  效果图:

201586171725525.jpg (256×154)

  这次介绍下CSS制作三角箭头

201586171755094.jpg (152×79)

  通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的。那是不是有更好的办法呢,毕竟要用两张图片来解决这么一个小问题太浪费资源了,于是,下面我要用纯CSS的方法来解决这一问题,用到的只需css的一个属性,就是border-width

  我们先来看个样式,如果设置元素边框,会怎么样:

201586171813609.jpg (119×78)

  似乎看不出什么,让我给四个边框加上不同的颜色吧再看看吧:

201586171847229.jpg (116×80)

  是不是发现了些什么?对,让我们把中间的文字去掉吧:

201586171906538.jpg (92×67)

  这样,就出现4个三角形了,然后我们如果需要顶部那个三角形,只需要将border的left、right、bottom设置成背景色就行了:

201586171926760.jpg (83×67)

  这样,我们需要的三角形就出现了,并且可以设置4个不同方向的了:

201586172331615.jpg (103×45)

  样式代码很简单,就几句话:

  CSS Code复制内容到剪贴板

  float: left;

  border-style: solid; border-width: 10px;

  border-color: #000 #ccc #ccc #ccc;

  height: 0;

  width: 0;

  font-size: 0;

  实际应用

  比如我们要使用向下的箭头(兼容IE6写法)

  HTML代码:

  XML/HTML Code复制内容到剪贴板

  

 

 

  CSS代码:

  CSS Code复制内容到剪贴板

  .demo{position:relative}

  .bottombottom-arrow{

  position:absolute;

  top:10px;

  left:0px;

  border-style:solid;

  border-width:100px;

  border-color:#000000 transparent transparent transparent;/*上边框设置想要的颜色*/

  height:0;

  width:0;

  font-size:0;

  _border-color:#000000 tomato tomato tomato ; /*边框透明色 For IE6-*/

  _filter:chroma(color=tomato);/*边框透明色 For IE6-*/

  }

  说明:

  这里的演示是用了边框透明色,如果你用不到透明的话,直接设置border-color为你需要的颜色就可以了,免去为了兼容IE6的透明边框滤镜写法

  Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:

  CSS Code复制内容到剪贴板

  Filter:Chroma(color=color)

  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。

相关热词: CSS三角箭头

Copyright © 2002-2016 16教程网 版权所有     
电脑教程 Office教程 平面设计 PS教程 室内设计 网页设计