[分享]利用:after+border画纯css三角

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/7/22

网页素材:显示三角图标的方式有很多,譬如:图片、符号△▲;用纯css的方式,怎么显示三角呢? 三角要怎么用才能美观呢?本站之前的一篇纯css的标签背景就是一个很好的应用方式。
那么本文主要介绍这种纯css显示三角的原理。

先看一下一个简单例子的效果:

HTML代码:

 

CSS代码:

span{border: 10px solid transparent; border-bottom: 11px solid #000; border-top: none;}

这里就是用纯border显示的向上的三角,我们可以看到,先透明border,然后一个底边,去掉顶部的border。 那么向右的箭头怎么写呢? border: 10px solid transparent; border-left: 11px solid #000; border-right: none;display:block; 注意此处display:block;同理,向左的箭头和向下的箭头,你应该也知道了吧。

然后看一下三角的应用效果:

 css显示三角

 

HTML代码:

    
Issue15

CSS代码:

.issue {
    position: absolute;
    top: 0;
    right: 90px;
    width: 48px;
    height: 58px;
    font-family: Georgia;
    background: #649F0C;
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    padding-top:6px;
}
.issue:after {
    content: '';
    display: block;/*这个也很关键的*/
    position: absolute;
    width: 0px;
    height: 0px;
    bottom: 0;
    left: 0;
    border: 24px solid transparent;
    border-bottom: 11px solid #fff; /*此颜色根据页面背景色一直。不能为透明色transparent*/
    border-top: none;
    z-index: 1;
    }
.issue em {
    display: block;
    font-style: normal;
    font-size: 18px;
}

需要注意的关键代码是::aftercontent: ''; border: 24px solid transparent; border-bottom: 11px solid #fff; /*此颜色根据页面背景色一直。不能为透明色transparent*/ border-top: none;

CSS语法(伪对象选择符)

E:after/E::after{ sRules }

说明:设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用。CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。 即E:after可转化为E::after

更多例子:比如向上三角,向右三角在线调试http://jsfiddle.net/camnpr/G6KzB/3/

怎么在框的外边显示三角效果:(先看效果图)
在框的外边显示三角

HTML代码:

content

content

CSS代码:

    /*-------------------------------------*/
/* 顶部三角的样式*/
/*-------------------------------------*/
.arrow_box {
    background: #FEFEFE;
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0)";
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F0F0F0));
    background: -moz-linear-gradient(center top , #FEFEFE 0%, #F0F0F0 100%) repeat scroll 0 0 transparent;
    border: 4px solid #EDEDED;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 1px #F8F8F8;
    -moz-box-shadow: 0 0 0 1px #F8F8F8;
    box-shadow: 0 0 0 1px #F8F8F8;
    padding: 10px;
    margin: 20px 0px;
}
.arrow_box:after, .arrow_box:before {
    border: medium solid transparent;
    bottom: 100%;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    width: 0;
}
.arrow_box:after {
    border-bottom-color: #F4F4F4;
    border-width: 10px;
    left: 28px;
    margin-left: -10px;
}
.arrow_box:before {
    border-bottom-color: #EEEEEE;
    border-width: 18px;
    left: 28px;
    margin-left: -18px;
}
 
/*-------------------------------------*/
/* 左侧三角的样式*/
/*-------------------------------------*/
.left_arrow_box {
    background: none repeat scroll 0 0 #FFF;
    border: 6px solid rgba(190,190,190,0.3);
    position: relative;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
       border-radius: 5px;
-webkit-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
   -moz-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
       box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
 
}
.left_arrow_box:after, .left_arrow_box:before {
   right: 100%;
   border: medium solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}
.left_arrow_box:after {
   border-right-color: #F4F4F4;
   border-width: 10px;
   top: 50%;
   margin-top: -10px;
}
.left_arrow_box:before {
   border-right-color: #E3E3E3;
   border-width: 18px;
   top: 50%;
   margin-top: -18px;
}

这种效果的原理是和上边的差不多,只是,使用了定位。同时让两个三角叠加,达到的一种效果。 你也可以通过在线调试来加深理解:在线演示效果

相关阅读:

纯css的标签背景
纯css的标签背景

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/use-after-and-pure-css-triangles-drawn-border.html