美文网首页
css六边形

css六边形

作者: 张xiao蛋 | 来源:发表于2022-06-10 16:42 被阅读0次

    Html

    <div class="hexagon_box"></div>
    

    CSS

    .hexagon_box {
            margin-top: 70px;
            width: 208px;
            height: 120px;
            background: grey;
            position: relative;
        }
        .hexagon_box:before,
        .hexagon_box:after {
            content: '';
            border-left: 104px solid transparent;
            border-right: 104px solid transparent;
            position: absolute;
        }
        .hexagon_box:before {
            top: -59px;
            border-bottom: 60px solid grey;
        }
        .hexagon_box:after {
            bottom: -59px;
            border-top: 60px solid grey;
        }
    

    相关文章

      网友评论

          本文标题:css六边形

          本文链接:https://www.haomeiwen.com/subject/hxebmrtx.html