css三角的做法

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

 

1.新浪图片三角

示例图：

示例代码： 

 1 /*样式*/： 
 2  .box1 {
 3      padding: 15px 30px;
 4      position: relative;
 5     width: 60px;
 6   }
 7 .box1 span {
 8      background: url(icon.png) no-repeat 0 -355px;//icon.png是精灵图
 9      width: 9px;
10      height: 5px;
11      position: absolute;
12      top: 19px;
13      right: 15px;
14  }
15 
16 /*html*/
17 <div class="box1">
18      <a href="">移动客户端</a>
19     <span></span>
20 </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>

 

转载于:https://www.cnblogs.com/magic-world/p/4730353.html