建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS三角箭头应用实践

更新时间:2016-12-23整理编辑:建站学习网阅读:0

   用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复制内容到剪贴板

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

  

  

  效果图:

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

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

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

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

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

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

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

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

  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参数设置出来就可以了。

本文网址:https://www.dedexuexi.com/divcss/jc/1367.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
全方位了解CSS3的Regions扩展
« 上一篇2016年12月23日
CSS选择器学习攻略
2016年12月23日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content