A-A+

css 五边形,六边形,八边形

2018年09月03日 htmlcss 暂无评论 阅读 68 次

css 五边形,六边形,八边形,需要考虑如下效果如何实现?

六边形border

<html>
<head>
    <style>
        .sixedge{
            height: 24px;
            width: 55px;
            position:relative;
            background-color: #FFF;
            border-top:1px solid green;
            border-bottom:1px solid green;
            margin-left:40%;
        }
        .sixedge:after{
            content: '';
            position: absolute;
            background-color: transparent;
            top: 3px;
            right: -9px;
            width: 17px;
            height: 17px;
            transform: rotate(45deg);
            -ms-transform: rotate(45eg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            border-top: 1px solid green;
            border-right: 1px solid green;
        }

        .sixedge:before{
            content: '';
            position: absolute;
            background-color: transparent;
            top: 3px;
            left: -9px;
            width: 17px;
            height: 17px;
            transform: rotate(45deg);
            -ms-transform: rotate(45eg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            border-bottom: 1px solid green;
            border-left: 1px solid green;
        }




    </style>


    <style>
        #pentagon {
            top:50px;
            position: relative;
            width: 54px;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
        }
        #pentagon:before {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            top: -85px;
            left: -18px;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
        }

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

        #octagon {
            top:100px;
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }

        #octagon:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 29px solid red;
            border-left: 29px solid #eee;
            border-right: 29px solid #eee;
            width: 42px;
            height: 0;
        }
        #octagon:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid red;
            border-left: 29px solid #eee;
            border-right: 29px solid #eee;
            width: 42px;
            height: 0;
        }
    </style>
</head>
<body>
<div class="sixedge">six</div>
<div id="pentagon"></div>
<div id="hexagon"></div>
<div id="octagon"></div>
</body>
</html>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录