设计项目符号

HTML

<ul>
    <li>
        <div class="trigon"></div>
        <span class="content">列表一</span> </li>
    <li>
        <div class="trigon"></div>
        <span class="content">列表二</span> </li>
    <li>
        <div class="trigon"></div>
        <span class="content">列表三</span> </li>
    <li>
        <div class="trigon"></div>
        <span class="content">列表四</span> </li>
</ul>
					    

CSS

ul {
    list-style: none;
    width: 300px;
}
ul li {
    border: 1px solid #eee;
    height: 32px;
    vertical-align: middle;
    border-bottom: none;
}
ul li:last-child { border-bottom: 1px solid #eee; }
ul li .content {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
}
.trigon {
    display: inline-block;
    border-top: 5px solid #FFFFFF;
    border-left: 5px solid #FF3300;
    border-bottom: 5px solid #FFFFFF;
}