css三角的做法

css三角分为5类：图片三角、一个盒子写的三角、两个盒子写的三角、iconfont三角、css3三角

 

1.新浪图片三角

示例图：

示例代码： 

/*样式*/： 
 .box1 {
     padding: 15px 30px;
     position: relative;
    width: 60px;
  }
.box1 span {
     background: url(icon.png) no-repeat 0 -355px;//icon.png是精灵图
     width: 9px;
     height: 5px;
     position: absolute;
     top: 19px;
     right: 15px;
 }

/*html*/
<div class="box1">
     <a href="">移动客户端</a>
    <span></span>
</div>

 

2.易迅一个盒子的三角

易迅截图：

 

示例图：

示例代码：

/*css*/
.box2 {
    width: 0;
    height: 0;
　　border-width:20px;
　　border-color:#f00 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    margin: 10px 0;
}

/*html*/
<div class="yixun"></div>

 

3.淘宝两个盒子的三角

淘宝截图：

示例图：

示例代码：

/*css*/
i {
    position: relative;
    display: block;
}
i em, i span {
    display: block;
    width: 0;
    height: 0;
    border-width: 20px;
    border-color: transparent transparent transparent #f00;
    border-style: dashed dashed dashed solid;
    position: absolute;
    overflow: hidden;
}
i span {
    left: -10px;
    border-left-color: #fff;
}


/*html*/
<i>
    <em></em>
    <span></span>
</i>

 

4.小米、土豆的iconfont图标字体的三角

小米截图：

 

土豆截图：

 

研究透了在加

 

5.css3三角

示例图：

示例代码：

/*css*/
.css3 {
    width: 200px;
    height: 100px;
    border: 1px solid #f00;
    margin-bottom: 20px;
}
.css3 span {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid solid dashed dashed;
    border-color: red red transparent transparent;
    transform: rotate(45deg);
    margin: 20px auto;
    display: block;
}



/*html*/
<div class="css3">
    <span></span>
</div>