用css3实现了一个tp的logo，不是100%像
- WBOY원래의
- 2016-06-07 11:45:491488검색
火狐下效果好，ie圆角不兼容
nbsp;html><br>
<br>
<br>
<meta>
<br>
<meta>
<br>
<title>tp_logo</title>
<br>
<meta>
<br>
<meta>
<br>
<style><br />
.border{border: 1px solid #000;width:200px;margin: 0 auto}<br />
#logo,#left,#right,#bottom{width: 200px;height: 200px;}<br />
#logo{<br />
background-color: #84C255;<br />
border-top-left-radius:30px;<br />
border-bottom-right-radius:30px; <br />
overflow: hidden;<br />
position: relative; <br />
}<br />
#left{ <br />
transform:rotate(45deg);<br />
left: -140px;<br />
background-color: #6FB737;<br />
position: absolute;<br />
}<br />
#right{<br />
transform:rotate(45deg);<br />
right: -140px;<br />
background-color: #6FB737;<br />
position: absolute;<br />
}<br />
#bottom{<br />
transform:rotate(45deg);<br />
top: 140px;<br />
background-color: #5E9C2F;<br />
position: absolute;<br />
}<br />
.line{<br />
position: relative;<br />
border-left: 38px solid white;<br />
width: 40px;<br />
height: 70px;<br />
border-bottom-left-radius: 78px 60px;<br />
}<br />
.right{transform:rotate(-120deg);}<br />
.left{transform:rotate(60deg);}<br />
#line1_right{<br />
top:20px;<br />
left: -28px;<br />
}<br />
#line1_left{<br />
top:19px;<br />
left: -68px;<br />
}<br />
#line2_right{<br />
top:-70px;<br />
left: 10px;<br />
}<br />
#line2_left{<br />
top:-71px;<br />
left: -30px;<br />
} <br />
#line3_right{<br />
top:-160px;<br />
left: 48px;<br />
}<br />
#line3_left{<br />
top:-161px;<br />
left: 10px;<br />
} <br />
</style>
<br>
<br>
<br>
<center>
<br>
<div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
</div>
<br>
</center>
<br>
<br>
AD：真正免费，域名+虚机+企业邮箱=0元