简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3图标
PHP中文网
PHP中文网 2017-04-17 11:33:16
0
3
1030

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

PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답(3)
小葫芦
小葫芦2017-04-17 11:35:16 3층 
<!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 2층

正在学习前端。尝试做一下。

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

如果白色小圆点处需要透明，能看到底层背景。这如何做呢

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！