APicloud中右上角的小三角行的绘制

大家现在经常可以看到这样的界面

右上角的小三角形，他的实现方式为：

       .ssss {
                   position: relative;
                   float: right;
                   color: #FFF;
                   right: 0;
                   top: 0;
                   width: 0px;
                   height: 0px;
                   background-color: #f2f2f2;
                   border-width: 10px 0 10px 15px;/*三角形朝向*/
                   border-style: solid;
                   border-color: #f00 transparent transparent;/*透明度*/
                   }

        <li class="types">
                              <span class="ssss"></span>
                              <img src="../image/H.png" class="types_pic"/>
                              <p class="type_name">
                                    书写工具系列
                              </p>
                              <p class="type_englishname">
                                    WRITING TOOLS SERIES
                              </p>
                        </li>

这就完美的实现了上图的小三角。

还有几种小三角的样式：

#up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

#topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

#topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

#bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}