|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3六边形</title> </head> <body> <style> .hex-box-top{height: 0; width: 0; border-bottom: 30px solid #C66; border-left: 52px solid transparent; border-right: 52px solid transparent;} .hex-box-bottom{height: 0; width: 0; border-top: 30px solid #C66; border-left: 52px solid transparent; border-right: 52px solid transparent;} .hex-box-mid{width: 104px; height: 60px; background-color: #C66;} .hex-box-left{float: left; height: 0; width: 0; border-left: 28px solid #C66; border-top: 50px solid transparent; border-bottom: 50px solid transparent;} .hex-box-right{float: left; height: 0; width: 0; border-right: 28px solid #C66; border-top: 50px solid transparent; border-bottom: 50px solid transparent;} .hex-box-mid1{float: left; width: 56px; height: 100px; background-color: #C66;} </style> <div class="hex-box-top"></div> <div class="hex-box-mid"></div> <div class="hex-box-bottom"></div> <div class="hex-box"> <div class="hex-box-right"></div> <div class="hex-box-mid1"></div> <div class="hex-box-left"></div> </div> </body> </html> |
