纯css制作小三角

最新推荐文章于 2022-10-13 10:50:22 发布

weixin_30338743

最新推荐文章于 2022-10-13 10:50:22 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/dxzg/p/6547151.html

版权

在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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>

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

转载于:https://www.cnblogs.com/dxzg/p/6547151.html

weixin_30338743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css制作小三角

在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了css3后很多变得方便了，比如要在li列表的每行文字的前面加个小三角，可以这么写：<!DOCTYPE html><html><head> <meta charset="gb2312"> <title>ces</title>...
复制链接

扫一扫