用css3实现了一个tp的logo，不是100%像

jerry 2015年11月18日收藏

火狐下效果好，ie圆角不兼容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>tp_logo</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style type="text/css">
            .border{border: 1px solid #000;width:200px;margin: 0 auto}
            #logo,#left,#right,#bottom{width: 200px;height: 200px;}
            #logo{
                background-color: #84C255;
                border-top-left-radius:30px;
                border-bottom-right-radius:30px; 
                overflow: hidden;
                position: relative; 
            }
            #left{ 
                transform:rotate(45deg);
                left: -140px;
                background-color: #6FB737;
                position: absolute;
            }
            #right{
                transform:rotate(45deg);
                right: -140px;
                background-color: #6FB737;
                position: absolute;
            }
            #bottom{
                transform:rotate(45deg);
                top: 140px;
                background-color: #5E9C2F;
                position: absolute;
            }
            .line{
                position: relative;
                border-left: 38px solid white;
                width: 40px;
                height: 70px;
                border-bottom-left-radius: 78px 60px;
            }
            .right{transform:rotate(-120deg);}
            .left{transform:rotate(60deg);}
            #line1_right{
                top:20px;
                left: -28px;
            }
            #line1_left{
                top:19px;
                left: -68px;
            }
            #line2_right{
                top:-70px;
                left: 10px;
            }
            #line2_left{
                top:-71px;
                left: -30px;
            }    
            #line3_right{
                top:-160px;
                left: 48px;
            }
            #line3_left{
                top:-161px;
                left: 10px;
            }    
        </style>
    </head>
    <body>
        <center class="border">
            <div id="logo">
                <div id="left"></div>
                <div id="right"></div>
                <div id="bottom"></div>
                <div class="line right" id="line1_right"></div>
                <div class="line left" id="line1_left"></div>
                <div class="line right" id="line2_right"></div>
                <div class="line left" id="line2_left"></div>
                <div class="line right" id="line3_right"></div>
                <div class="line left" id="line3_left"></div>
            </div>
        </center>
    </body>
</html>