欢迎光临一流素材网,免积分免费素材下载!

CSS3六边形

所属栏目:DIV+CSS实例更新时间:2020-02-20 来源:网络 原作者:不详 发布:deepdfhy浏览:0

image


HTML

<div class="sharp"><div class="sharpb"><b>01</b></div></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;}


标签: 六边形
收藏 0 有帮助 0 没帮助 0 打赏 0
相关教程
给个评价吧
学习更多的
最新更新的