html六边形模块,CSS3六边形_DIV+CSS实例_HTML+CSS_教程_一流素材网

HTML

01

CSS.sharp {background-color: #999; width: 134px;

height: 151px; padding: 5px;

webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

}

.sharpb {background-color: #fff; width: 134px; height: 151px; line-height: 151px; text-align: center;

webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);}

.sharp b {color: #333; font-size: 40px;}

.sharp:hover {background-color: #36ABB4;}

.sharp:hover b {color: #36ABB4;}