css写箭头

第一种

<div class="mark">

<i class="mar mar-l"></i>
<span>伙拼价</span>

<i class="mar mar-r"></i>

</div>

<style>

.mark {

1. position: absolute;
2. left: 10px;
3. top: -8px;
4. height: 16px;
5. color: #fff;

}

.mark .mar {

1. display: block;
2. width: 0;
3. height: 0;
4. font-size: 0;
5. line-height: 0;

}

.mark .mar-l {

1. float: left;
2. border-top: 8px solid transparent;
3. border-bottom: 8px solid transparent;

}

.mark .mar-l {

1. border-right: 6px solid #97000f;

}

.mark .mar-r {

1. border-left: 6px solid #97000f;
2. float: left;
3. border-top: 8px solid transparent;
4. border-bottom: 8px solid transparent;

}

.mark span {

1. background: #97000f;
2. float: left;
3. line-height: 16px;
4. padding: 0 1px;
5. font-family: arial;

}

</style>

第二种

<i class="skill_icon1 fl"></i>

<style>

.skill_paper .skill_icon1 {

1. border-top: 27px solid #74c954;
2. border-right: 10px solid transparent;
3. display: block;

}

</style>