两种纯html+css3实现六边形
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代码。<divclass="zcc"></div><divclass="zcc2"><divclass="left"></div><divclass="right"></div></div>
3、初始化css代码。<style>html,body{width:100婊剧琏兄%;height:100%;margin:0;padding:扉钛笆哇0;}.wrapper{position:relative;width:420px;margin:0auto;padding:0;font-size:0;}.icon{position:relative;display:inline-block;width:100px;height:100px;margin:20px;border-radius:18px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}</style>
4、书写css代码跷孳岔养。<style>.zcc{width:66px;height:120px稆糨孝汶;margin:100pxauto;background-color:#008000;position:relative;}.zcc::before{content:"";width:0;height:0;position:absolute;left:-35px;top:0;border-right:35pxsolid#008000;border-top:60pxsolidtransparent;border-bottom:60pxsolidtransparent;}.zcc::after{content:"";width:0;height:0;position:absolute;right:-35px;top:0;border-left:35pxsolid#008000;border-top:60pxsolidtransparent;border-bottom:60pxsolidtransparent;}.zcc2{width:66px;height:120px;margin:100pxauto;background-color:red;position:relative;}.zcc2.left{width:0;height:0;position:absolute;left:-35px;top:0;border-right:35pxsolidred;border-top:60pxsolidtransparent;border-bottom:60pxsolidtransparent;}.zcc2.right{width:0;height:0;position:absolute;right:-35px;top:0;border-left:35pxsolidred;border-top:60pxsolidtransparent;border-bottom:60pxsolidtransparent;}</style>
5、代码整体结构。
6、查看效果。
