CSS3六边形

2021-04-05 07:52 jianzhan
隶属频道:DIV+CSS案例升级 著作人:不祥 公布:deepdfhy访问:0次

image


HTML

 div  >

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;}