Home  >  Article  >  php教程  >  用css3实现了一个tp的logo,不是100%像

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

WBOY
WBOYOriginal
2016-06-07 11:45:491488browse

火狐下效果好,ie圆角不兼容
用css3实现了一个tp的logo,不是100%像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元

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn