用CSS怎样实现三角形小图标效果

用CSS怎样实现三角形和箭头的小图标效果？在网站设计中，我们经常会需要使用到一些小图片，但是如果网站的图片太多，不仅不好管理，而且还会拖累网站的速度，因此，很多时候我们会使用一些简单的标签样式来实现简单的图形标志来替代图片，这篇给大家分享三角形和箭头的小图标效果的实现。

三角形示例

示例代码：
<style type="text/css">
.triangle b {
    border: 5px solid #fff;
    border-left: 5px solid #353535;
    margin: 0;
    font-size: 0;
}
</style>

示例代码：
<style type="text/css">
 .mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;}
 .mark  b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);}
 </style>
 
空缺圆
     *{
    padding:0;
    margin:0;
    }

div:before{
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    top:-10px;
    left:40px;
    border-radius:50%;
    background-color:white;
    }

div{
    position:relative;
    width:100px;
    height:100px;
    margin:100px auto;
    box-shadow:0 0 2px red;
    background-color:#ccc;
    }    

以上就是用CSS实现三角形和箭头的小图标效果的介绍，感兴趣的朋友可以参考上述代码，当然还能实现更多的小图标样式，大家可以自己来尝试看看。