您现在的位置是：网站首页> 编程资料编程资料

CSS三角箭头应用实践详解CSS3 用border写 空心三角箭头 (两种写法)CSS怎么去掉select的下拉箭头样式 纯CSS绘制三角形箭头图案技术解析CSS制作箭头图标代码(圆，三角形，椭圆) 仿新浪微博箭头的css写法纯CSS绘制三角形箭头效果纯CSS实现箭头、气泡让提示功能具有三角形图标Css绘制箭头实现代码CSS模拟小箭头的实现代码使用css实现任意大小、任意方向和任意角度的箭头示例

2023-10-23 1105人已围观

简介 这篇文章主要介绍了CSS三角箭头应用实践,主要分为用来制作对话框箭头和下拉菜单箭头等情况,需要的朋友可以参考下

用CSS来制作无图片带箭头的DIV方框（此代码比较适合追求纯代码者）
这类效果也可以用图片背景来实现，代码会更简洁
CSS代码：

CSS Code复制内容到剪贴板
  1. div.container{position:absolute;    
  2.        top:30px;    
  3.        left:40px;    
  4.        font-size: 9pt;    
  5.        display:block;    
  6.        height:100px;    
  7.        width:200px;    
  8.        background-color:transparent;    
  9.        *border:1px solid #666;    
  10.        }    
  11.        s{    
  12.        position:absolute;    
  13.        top:-20px;    
  14.        *top:-22px;    
  15.        left:20px;    
  16.        display:block;    
  17.        height:0;    
  18.        width:0;    
  19.        font-size: 0;     
  20.        line-height: 0;    
  21.        border-color:transparent transparent #666 transparent;    
  22.        border-style:dashed dashed solid dashed;    
  23.        border-width:10px;    
  24.        }    
  25.        i{position:absolute;    
  26.        top:-9px;    
  27.        *top:-9px;    
  28.        left:-10px;    
  29.        display:block;    
  30.        height:0;    
  31.        width:0;    
  32.        font-size: 0;    
  33.        line-height: 0;    
  34.        border-color:transparent transparent #fff transparent;    
  35.        border-style:dashed dashed solid dashed;    
  36.        border-width:10px;    
  37.        }    
  38.        .content{    
  39.        border:1px solid #666;    
  40.        -moz-border-radius:3px;    
  41.        -webkit-border-radius:3px;    
  42.        position:absolute;    
  43.        background-color:#fff;    
  44.        width:100%;    
  45.        height:100%;    
  46.        padding:5px;    
  47.        *top:-2px;    
  48.        *border-top:1px solid #666;    
  49.        *border-top:1px solid #666;    
  50.        *border-left:none;    
  51.        *border-right:<

    上一篇：CSS的font-size属性及其em值的使用详解使用 CSS 的 font-size-adjust 属性改善网页排版知识普及之CSS: body{font-size: 62.5%;}这种写法的原因CSS中的font-size属性使用教程CSS Font-Size: em、px 、pt 、Percent之间的关系及换算css font-size属性说明CSS网页布局学习之Font-size的妙用css中一些常用的font-size字体单位和line-height详解

    下一篇：CSS选择器学习攻略深入理解CSS中选择器的逻辑处理详细介绍CSS中的伪选择器举例详解CSS中的选择器

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网