css

当前位置:首页 > 前端 > css

CSS 六边形 菱形写法

https://www.hongjia86.com/ 参考站
.hzkh li {
    position: relative;
    text-align: center;
    z-index: 1;
    width: calc(100%/9 - 16px);
    margin: 0 8px 0 8px;
    height: 8.8vw;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
    border-radius: 8px;
    cursor: pointer;
}

.hzkh li a {
    height: 100%;
    width: 100%;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hzkh li .img {
    width: 96%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.hzkh li .img img {
    width: 100%;
    display: block;
}


上一篇:圆圈发散css

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~