纯css制作小三角

在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了css3后很多变得方便了，比如要在li列表的每行文字的前面加个小三角，可以这么写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>ces</title>
    <style>
        a{ text-decoration: none; color: #666; }
        ul{ list-style: none; }
        ul li{ margin-left: 10px; position: relative; }
        li::before{
            content: "";
            border: solid 4px; 
            border-color: transparent transparent transparent #666; 
            width: 0px; 
            height: 0px;  
            position: absolute; 
            left: -6px; 
            top: 6px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">列表列表列表列表列表列表</a></li>
        <li><a href="#">列表列表列表列表列表列表</a></li>
        <li><a href="#">列表列表列表列表列表列表</a></li>
        <li><a href="#">列表列表列表列表列表列表</a></li>
        <li><a href="#">列表列表列表列表列表列表</a></li>
        <li><a href="#">列表列表列表列表列表列表</a></li>
    </ul>
</body>
</html>

效果便如上所示，方框包围的小三角就是。

posted @ 2017-03-14 10:27  chillylight  阅读(377)  评论(0)  编辑  收藏  举报