巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

CSS三角箭头操纵理论

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:58 阅读数: 130

用CSS来建造无图片带箭头的DIV方框(此代码比拟合适寻求纯代码者)
这类结果也能够用图片背景来完成,代码会更简练
CSS代码:

CSS Code复制内容到剪贴板
  1. div.container{position:absolute;    
  2.        top:30px;    
  3.        left:40px;    
  4.        font-size9pt;    
  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:none;    
  52.        *height:102px;    
  53.        box-shadow: 3px 3px 4px #999;    
  54.        -moz-box-shadow: 3px 3px 4px #999;    
  55.        -webkit-box-shadow: 3px 3px 4px #999;    
  56.        /* For IE 5.5 - 7 */    
  57.        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#999999");    
  58.        /* For IE 8 */    
  59.        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#999999")";     
  60.        }  

HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <div class="content">  
  3.             <br>这是框中的笔墨,可静态显现。高度主动增添,应当不错吧^_^   
  4.         </div>  
  5.         <s>  
  6.             <i></i>  
  7.         </s>  
  8.  </div>  

结果图:

此次先容下CSS建造三角箭头

凡是,咱们做上图阿谁三角形,普通都是做张图,并且须要两张,由于普通都是下拉菜单的结果,须要有个hover的款式,箭头是反的。那是否是有更好的体例呢,究竟结果要用两张图片来处理这么一个小题目太华侈资本了,因而,上面我要用纯CSS的体例来处理这一题目,用到的只要css的一个属性,便是border-width

咱们先来看个款式,若是设置元素边框,会怎样样:

仿佛看不出甚么,让我给四个边框加上差别的色彩吧再看看吧:

是否是发明了些甚么?对,让咱们把中间的笔墨去掉吧:

如许,就呈现4个三角形了,而后咱们若是须要顶部阿谁三角形,只须要将border的left、right、bottom设置成背风景就好了:

如许,咱们须要的三角形就呈现了,并且能够设置4个差别标的目标的了:

款式代码很简略,就几句话:

CSS Code复制内容到剪贴板
  1. floatleft;    
  2. border-stylesolidborder-width10px;    
  3. border-color#000 #ccc #ccc #ccc;    
  4. height: 0;    
  5. width: 0;    
  6. font-size: 0;  

现实操纵

比方咱们要操纵向下的箭头(兼容IE6写法)

HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="demo"><span class="bottom-arrow"></span></div>  

CSS代码:

CSS Code复制内容到剪贴板
  1. .demo{position:relative}   
  2. .bottombottom-arrow{   
  3.     position:absolute;   
  4.     top:10px;   
  5.     left:0px;   
  6.     border-style:solid;   
  7.     border-width:100px;    
  8.     border-color:#000000 transparent transparent transparent;/*上边框设置想要的色彩*/  
  9.     height:0;    
  10.     width:0;    
  11.     font-size:0;   
  12.    _border-color:#000000 tomato tomato tomato ; /*边框通明色 For IE6-*/    
  13.    _filter:chroma(color=tomato);/*边框通明色 For IE6-*/    
  14. }  

申明:
这里的演示是用了边框通明色,若是你用不到通明的话,间接设置border-color为你须要的色彩就能够了,免除为了兼容IE6的通明边框滤镜写法
Chroma属性能够设置一个工具中指定的色彩为通明色,它的抒发式以下:

CSS Code复制内容到剪贴板
  1. Filter:Chroma(color=color)  

这个属性的抒发式是否是很简略,它只要一个参数。只要把您想要指定通明的色彩用Color参数设置出来就能够了。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

20
04月
html5嵌入内容_能源节点Java学院清算

在HTML文档中嵌入内容,能够使你的页面加倍丰硕。嵌入图象操纵img元素能够在HTML文档里嵌入图象,该元素包罗以下属性:1)src:显现图... >>概况

22
03月
网站扶植免费付出试用,还免费送域名

分享 都觉得2020会是一个好的起头,但一场肺炎疫情打乱了一切人的... >>概况

03
05月
怎样停止搜索引擎优化关头词挑选

在做搜索引擎优化的时辰,咱们首选要肯定坐哪几个关头词,普通主推3个关头词差未几,剩下的关头词作为赞助关头词,或称之为长尾关头词。说到关头词的挑选是... >>概况

08
04月
以中秋主题,为你科普闪屏设想的根本体例 -

明天给巨匠分享的是对于中秋闪屏设想的一些常识梳理,但愿带给你新的思绪与灵感。一、对于闪屏闪屏约即是启动页,其存在的目标都是为了减缓用户期待过... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站