zoukankan      html  css  js  c++  java
  • 纯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>

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

  • 相关阅读:
    webService 服务端搭建
    ss2h 整合
    Java绘制登陆验证码
    c3p0连接池
    DBCP连接池
    Cglib动态代理
    会话技术(Cookie,Session)
    Tomcat设置角色和密码
    转发和重定向
    JDK动态代理
  • 原文地址:https://www.cnblogs.com/dxzg/p/6547151.html
Copyright © 2011-2022 走看看