关闭

scss/css正六边形

68人阅读 评论(0) 收藏 举报
分类:

scss:

.hexagon {
    width: 100px;
    height: 55px;
    background: red;
    margin: 50px auto;
    position: relative;

    &:before,
    &:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
    }

    &:before {
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
    &:after {
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }
}

或者css:

.hexagon {
        width: 100px;
        height: 55px;
        background: red;
        margin: 50px auto;
        position: relative; 
    }
    .hexagon:before, .hexagon:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0; 
    }
    .hexagon:before {
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
    .hexagon:after {
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }

html:

<div class="hexagon"></div>

效果:这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:18269次
    • 积分:567
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:22篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论