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