注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

边框和字符实现的三角形  

2012-11-21 18:02:46|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

分享2种不用图片做小三角的方法:

   一种是字符代码如下:

   CSS代码:

.char_corl,.char_corr,.char_cort,.char_corb {

    display: inline-block;

    width: 6px;

    height: 14px;

    line-height: 15px;

    margin-bottom: -3px;

    font-size: 12px;

    font-family: '宋体';

    overflow: hidden;

}

.char_corr,.char_cort {

    text-indent: -5px;

}

.char_corb,.char_cort {

    -moz-transform: rotate(-90deg);

   -webkit-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    transform: rotate(-90deg);

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    position: relative\9;

    top:4px\0; *top:-2px;

}

HTML代码:

<span class="char_cort">&#9670;</span>

<span class="char_corb">&#9670;</span>

<span class="char_corl">&#9670;</span>

<span class="char_corr">&#9670;</span>

 

一种是边框代码如下:

 

CSS代码:

.border_cort, .border_corr, .border_corb, .border_corl {

    display: inline-block;

    width: 0;

    height: 0;

    border-width: 6px;

    overflow: hidden;

}

.border_cort {

    border-color: #333 transparent transparent;

    border-style: solid dotted dotted;

}

.border_corr {

    border-color: transparent #333 transparent transparent;

    border-style: dotted solid dotted dotted;

}

.border_corb {

    border-color: transparent transparent #333;

    border-style: dotted dotted solid;

}

.border_corl {

    border-color: transparent transparent transparent #333;

    border-style: dotted dotted dotted solid;

}

HTML代码:

<span class="border_cort"></span>

<span class="border_corb"></span>

<span class="border_corl"></span>

<span class="border_corr"></span>


 

 http://i.auto.sohu.com/user/register/toMailReg.at  实例

  评论这张
 
阅读(118)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017