5个很棒的纯CSS3图标

1. 六边形 2. 蝌蚪 3.笔尖 4. 松鼠 5.蝴蝶

css3，图标

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1830
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #121212;
}
h1 {
    font-family: Quicksand;
    text-align: center;
    margin-top: 30px;
    font-size: 3em;
    color: white;
}
.container {
    width: 100%;
    height: 500px;
}
ul {
    display: block;
    width: 90%;
    height: 271px;
    list-style: none;
    margin: 152px auto;
}
ul li {
    display: inline-block;
    width: 312px;
    height: 300px;
    margin-left: 12px;
}
.l1 {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #fd6634;
    margin: 121px 121px;
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    transform: rotate(-12deg);
}
.l1:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #fd6634;
}
.l1:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #fd6634;
}
.l {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #666633;
    margin: 0px 35px;
}
.l:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #666633;
}
.l:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #666633;
}
.la {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #990000;
    margin: 0px -35px;
}
.la:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #990000;
}
.la:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #990000;
}
.lb {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #ffcc00;
    margin: -30px -19px;
}
.lb:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #ffcc00;
}
.lb:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #ffcc00;
}
.lc {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #99cc33;
    margin: -30px 17px;
}
.lc:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #99cc33;
}
.lc:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #99cc33;
}
.ld {
    position: absolute;
    width: 32px;
    height: 17px;
    background: #00ccff;
    margin: 30px -19px;
}
.ld:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #00ccff;
}
.ld:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid #00ccff;
}
.t::before {
    content: "TECHNO FLOWER";
    display: block;
    width: 221px;
    font-family: Verdana;
    color: white;
    font-size: 12px;
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    transform: rotate(12deg);
    margin: 50px 21px;
}
.circ {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 100%;
    background: #1d231f;
    margin: 70px 75px
}
.c1 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 4px 43px;
    background: #03b4d6;
}
.c1::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 16px solid #03b4d6;
    margin: 25px 16px;
}
.c2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 35px 77px;
    background: #85c53d;
    -webkit-transform: rotate(-21deg);
    -ms-transform: rotate(-21deg);
    -o-transform: rotate(-21deg);
    transform: rotate(-21deg);
}
.c2::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 16px solid #85c53d;
    margin: -12px 9px;
}
.c3 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 73px 60px;
    background: #fb9a0b;
    -webkit-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}
.c3::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 16px solid #fb9a0b;
    margin: -12px 9px;
}
.c4 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 70px 19px;
    background: #ffe50a;
    -webkit-transform: rotate(21deg);
    -ms-transform: rotate(21deg);
    -o-transform: rotate(21deg);
    transform: rotate(21deg);
}
.c4::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 16px solid #ffe50a;
    margin: -12px 9px;
}
.c5 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 25px 9px;
    background: #dc4345;
    -webkit-transform: rotate(-152deg);
    -ms-transform: rotate(-152deg);
    -o-transform: rotate(-152deg);
    transform: rotate(-152deg);
}
.c5::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 16px solid #dc4345;
    margin: -12px 9px;
}
.c6 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: white;
    margin: 50px 50px;
}
.c6::before {
    content: "IDAHO FILM PROYECT";
    width: 221px;
    font-family: Verdana;
    color: white;
    font-size: 12px;
    display: block;
    margin: 30px 65px;
}
.lapiz {
    position: absolute;
    width: 50px;
    height: 55px;
    background: #fdb000;
    margin: 80px 102px;
    border: 5px solid #3b4359;
}
.lapiz::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #3b4359;
    margin: 60px -5px;
}
.lapiz::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-top: 21px solid #fdb000;
    margin: -90px 4px;
}
.trian {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #3b4359;
    margin: -75px 12px;
}
.trian::before {
    content: "";
    display: block;
    width: 30px;
    height: 21px;
    border-radius: 40px 40px 0 0;
    background: #fdb000;
    margin: -75px 21px;
    border: 5px solid #3b4359;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.bubles {
    position: absolute;
    width: 40px;
    height: 35px;
    border-radius: 100%;
    background: #fdb000;
    margin: -75px 21px;
    border-bottom: 5px solid #3b4359;
    border-top: 5px solid #3b4359;
    border-right: 5px solid #3b4359;
    margin: -172px 17px
}
.bubles::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    background: #fdb000;
    border-top: 5px solid #3b4359;
    border-left: 5px solid #3b4359;
    margin: -12px -21px
}
.bubles::after {
    content: "";
    display: block;
    width: 33px;
    height: 35px;
    border-radius: 100%;
    background: #fdb000;
    border-top: 5px solid #3b4359;
    border-left: 5px solid #3b4359;
    margin: -12px -30px
}
.bubles3 {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    border: 3px solid #3b4359;
    margin: -125px 12px
}
.bubles3::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    border: 3px solid #3b4359;
    margin: 9px 12px
}
.bubles3::after {
    content: "LIVE DRAWING SESSION by Sergey Punchev";
    display: block;
    width: 300px;
    font-family: Verdana;
    color: white;
    font-size: 12px;
    margin: 70px -112px;
}
.ardilla {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #ff5335;
    margin: 121px 112px;
}
.ardilla::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 12px solid #ff5335;
    border-left: 21px solid transparent;
    margin: 47px 0px
}
.ardilla::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #ff5335;
    margin: -70px -21px
}
.head {
    position: absolute;
    width: 27px;
    height: 25px;
    border-radius: 90px 50px;
    background: #ff5335;
    margin: -102px -27px
}
.head::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 9px solid #ff5335;
    border-left: 9px solid transparent;
    margin: -7px 16px;
}
.head::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: white;
    margin: 12px 7px;
}
.cola {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: #ff5335;
    margin: -152px 57px
}
.cola::before {
    content: "";
    display: block;
    width: 80px;
    height: 90px;
    border-radius: 100%;
    background: #121212;
    margin: 30px 21px
}
.cola::after {
    content: "SQUIRREL by Tim Boelaars";
    display: block;
    font -family: verdana;
    color: white;
    font-size: 12px;
    width: 172px;
    margin: -21px -112px
}
.buter {
    position: absolute;
    width: 50px;
    height: 70px;
    border-radius: 100%;
    background: #fbd607;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 90px 90px;
    z-index: 333;
}
.buter::before {
    content: "";
    display: block;
    width: 50px;
    height: 70px;
    border-radius: 100%;
    background: #f87121;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: 45px 45px;
}
.alas {
    position: absolute;
    width: 35px;
    height: 55px;
    border-radius: 100%;
    background: #ee4c98;
    margin: -85px 21px;
    opacity: .6;
}
.alas::before {
    content: "";
    display: block;
    width: 35px;
    height: 55px;
    border-radius: 100%;
    background: #93d0e3;
    margin: -33px -33px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.antenas {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border-top: 3px solid #f87121;
    margin: -121px 50px
}
.antenas::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border-right: 3px solid #fbd607;
    margin: -47px -47px;
}
.antenas::after {
    content: "BUTTERFLY";
    display: block;
    font -family: verdana;
    color: white;
    font-size: 12px;
    width: 172px;
    margin: 142px -109px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

HTML

</div>
        </li>
        <li>
            <div class="lapiz">
                <span class="trian"></span>
                <span class="bubles"></span>
                <span class="bubles3"></span>
            </div>
        </li>
        <li>
            <div class="ardilla">
                <span class="head"></span>
                <div class="cola"></div>
            </div>
        </li>
        <li>
            <div class="buter">
                <span class="alas"></span>
                <span class="antenas"></span>
            </div>
        </li>
        <li></li>
    </ul>
</div>

1. 六边形 2. 蝌蚪 3.笔尖 4. 松鼠 5.蝴蝶

css3，图标

编辑器支持Emmet

快捷键

1. 六边形 2. 蝌蚪 3.笔尖 4. 松鼠 5.蝴蝶

css3，图标

CSS3 简单的回形针/别针图标

方形和圆型的SNS社交类图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：