首頁  >  問答  >  主體

css3图标

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

PHP中文网PHP中文网2765 天前1037

全部回覆(3)我來回復

  • 高洛峰

    高洛峰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
    有同學在問圓點透明的問題,如果仔細閱讀style就能發現原點是由i標籤來呈現的,只要將i標籤的背景色改成rgba就可以達到目的。

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

    回覆
    0
  • 阿神

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

    正在學習前端。嘗試做一下。

    <!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>

    回覆
    0
  • 阿神

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

    如果白色小圓點處需要透明,就能看到底層背景。這如何做呢

    回覆
    0
  • 取消回覆