<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 LOGO</title> <style> .bg{ width: 500px; height: 500px; background: mediumpurple; margin: auto;/*网页居中*/ position: relative; overflow: hidden;/*隐藏内容溢出*/ } .light{ background: paleturquoise; width: 800px; height: 20px; position: absolute; left: -150px; top: 240px; } #dunpai{ position: relative; width: 100px; } .l1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 150px; top: 100px; } .l2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 118px; top: 100px; transform: skewX(12deg); } .l3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 150px; top: 310px; transform: skewY(12deg); } .r1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 250px; top: 100px; } .r2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg); } .r3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg); } #shield{position: absolute; transform: scale(0.9); left: 25px; top: 25px;} .rg1{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 250px; top: 100px; } .rg2{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg);} .rg3{position:absolute; background: deepskyblue; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg);} .wu1,.wu2,.wu3,.wu4{background: #eee; position: absolute;} .wu1{height: 20px; width: 80px; left: 170px; top: 153px; } .wu2{height: 20px; width: 60px; left: 190px; top: 237px; } .wu3{height: 18px; width: 43px; left: 209px; top: 339px; transform: skewY(12deg); } .wu4{height: 200px; width: 20px; left: 188px; top: 153px; transform: skewX(12deg); } .wu5,.wu6,.wu7,.wu8{background: #fff; position: absolute;} .wu5{height: 20px; width: 80px; left: 250px; top: 153px; } .wu6{height: 20px; width: 60px; left: 250px; top: 237px; } .wu7{height: 18px; width: 43px; left: 250px; top: 339px; transform: skewY(-12deg); } .wu8{height: 200px; width: 20px; left: 296px; top: 153px; transform: skewX(-12deg); } .wu9{position:absolute; height:31px; width: 30px; left: 189px; top: 257px; background: #8A2BE2; transform: skewX(12deg);} .wu10{position:absolute; height:64px; width: 29px; left: 305px; top: 173px; background: deepskyblue;; transform: skewX(-12deg); } #txt{position: absolute; width:180px ; height: 80px; left: 152px; top: 10px; font-size: 75px;} </style> </head> <body> <div class="bg"> <div class="light" style="transform:rotate(60deg) ;"></div> <div class="light" style="transform:rotate(90deg) ;"></div> <div class="light" style="transform:rotate(120deg) ;"></div> <div class="light" style="transform:rotate(150deg) ;"></div> <div class="light" style="transform:rotate(180deg) ;"></div> <div class="light" style="transform:rotate(210deg) ;"></div> <div id="dunpai"> <div class="l1"></div> <div class="l2"></div> <div class="l3"></div> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div id="shield"> <div class="rg1"></div> <div class="rg2"></div> <div class="rg3"></div> </div> <div class="wu1"></div> <div class="wu2"></div> <div class="wu3"></div> <div class="wu4"></div> <div class="wu5"></div> <div class="wu6"></div> <div class="wu7"></div> <div class="wu8"></div> <div class="wu9"></div> <div class="wu10"></div> <div id="txt">HTML</div> </div> </div> </body> </html>