CSS3如何写一个六边形图形代码

原创 新起点博客  2020-07-13 10:55 
【上云必备】上云仅?102/年

CSS3如何写一个六边形图形代码:

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

 

本文地址:https://www.henenseo.com/archives/2904
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情