Home  >  Q&A  >  body text

css3图标

用css3怎么画一个这样的图标!!谢谢!!!

PHP中文网PHP中文网2762 days ago1029

reply all(3)I'll reply

  • 高洛峰

    高洛峰2017-04-17 11:35:16

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <title>Tab Style</title>
        <style>
            p {width:112px;height:32px;float:left;position:relative;overflow:hidden;}
            p:before {content:'';background:#9f9f9f;width:32px;height:32px;transform:rotate(-45deg);position:absolute;left:6px;border-radius:2px;}
            p:after {content:'';background:#9f9f9f;width:96px;height:32px;position:absolute;right:0;border-radius:3px;}
            p > i {width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;margin-top:-4px;left:8px;}
        </style>
    </head>
    <body>
        <p><i></i></p>
    </body>
    </html>

    update 2017.02.07
    Some students are asking about the transparency of dots. If you read the style carefully, you can find that the origin is presented by the i tag. Just change the i tag Changing the background color to rgba can achieve the goal.

    p > i {width:8px;height:8px;background:rgba(255,255,255,.3);border-radius:50%;position:absolute;top:50%;margin-top:-4px;left:8px;}

    reply
    0
  • 阿神

    阿神2017-04-17 11:35:16

    Learning front-end. Try doing it.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>CSS画标签</title>
        <link rel="stylesheet" href="">
        <style>
            .content{
                width:150px;
                height:50px;
                position:relative;
                left:200px;
                background-color: #ccc;
                border-radius:0 5px 5px 0;
            }
            .angel{
                position: absolute;
                width:0;
                height:0;
                border-top: 25px solid transparent;
                border-bottom:25px solid transparent;
                border-right:25px solid #ccc;
                left:-25px;
            }
            .circle{
                background-color: #fff;
                height:10px;
                width:10px;
                border-radius: 50%;
                position:absolute;
                top:20px;
            }
        </style>
    </head>
    <body>
        <p class="content">
            <p class="angel"></p>
            <p class="circle"></p>
        </p>
    </body>
    </html>

    reply
    0
  • 阿神

    阿神2017-04-17 11:35:16

    If the white dot needs to be transparent, the underlying background can be seen. How to do this

    reply
    0
  • Cancelreply