CSS3角箭头运用实践活动

日期:2021-03-05 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

用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制做3角箭头

一般,大家做上图那个3角形,1般全是做张图,并且必须两张,由于1般全是往下拉菜单的实际效果,必须有个hover的款式,箭头是反的。那是否有更好的方法呢,终究要用两张照片来处理这么1个小难题太消耗資源了,因而,下面我要用纯CSS的方式来处理这1难题,用到的只需css的1个特性,便是border-width

大家先看来个款式,假如设定元素边框,会如何:

好像看不出甚么,让我给4个边框再加不一样的色调吧再看看吧:

是否发现了些甚么?对,让大家把正中间的文本去掉吧:

这样,就出現4个3角形了,随后大家假如必须顶部那个3角形,只必须将border的left、right、bottom设定成情况色就可以了:

这样,大家必须的3角形就出現了,而且能够设定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特性能够设定1个目标中特定的色调为全透明色,它的表述式以下:

CSS Code拷贝內容到剪贴板
  1. Filter:Chroma(color=color)  

这个特性的表述式是否很简易,它仅有1个主要参数。只需把您要想特定全透明的色调用Color主要参数设定出来便可以了。