前端网站CSS扇形菜单

前端开发必须掌握的技能|手机前端开发|前端开发实习总结

html 代码

<!DOCTYPE html>
<head>
    <title></title>
    <meta charset=”UTF-8″>
    <style>
        #sector {
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 100px;
            margin: 150px auto;
            background-color: #ddd;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
        #sector ul li {
            list-style: none;
            position: absolute;
            width: 200px;
            height: 100px;
            right: 50%;
            top: 0;
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }
        #sector .sector1 {
            background-color: #fef4ac;
            -webkit-transform: skew(54deg);
            -moz-transform: skew(54deg);
            -ms-transform: skew(54deg);
            transform: skew(54deg);
        }
        #sector .sector2 {
            background-color: #FCF6E6;
            -webkit-transform: rotate(36deg) skew(54deg);
            -moz-transform: rotate(36deg) skew(54deg);
            -ms-transform: rotate(36deg) skew(54deg);
            transform: rotate(36deg) skew(54deg);
        }
        #sector .sector3 {
            background-color: #faf2cc;
            -webkit-transform: rotate(72deg) skew(54deg);
            -moz-transform: rotate(72deg) skew(54deg);
            -ms-transform: rotate(72deg) skew(54deg);
            transform: rotate(72deg) skew(54deg);
        }
        #sector .sector4 {
            background-color: #f9f1e9;
            -webkit-transform: rotate(108deg) skew(54deg);
            -moz-transform: rotate(108deg) skew(54deg);
            -ms-transform: rotate(108deg) skew(54deg);
            transform: rotate(108deg) skew(54deg);
        }
        #sector .sector5 {
            background-color: #f5e79e;
            -webkit-transform: rotate(144deg) skew(54deg);
            -moz-transform: rotate(144deg) skew(54deg);
            -ms-transform: rotate(144deg) skew(54deg);
            transform: rotate(144deg) skew(54deg);
        }
        #sector ul li p {
            position: absolute;
            top: 50px;
            left: 150px;
            -webkit-transform: skew(-54deg) rotate(-70deg);
            -moz-transform: skew(-54deg) rotate(-70deg);
            -ms-transform: skew(-54deg) rotate(-70deg);
            transform: skew(-54deg) rotate(-70deg);
        }
    </style>
</head>
<body>
    <div id=”sector”>
        <ul>
            <li class=”sector1″>
                <p>A</p>
            </li>
            <li class=”sector2″>
                <p>B</p>
            </li>
            <li class=”sector3″>
                <p>C</p>
            </li>
            <li class=”sector4″>
                <p>D</p>
            </li>
            <li class=”sector5″>
                <p>E</p>
            </li>
        </ul>
        <a></a>
    </div>
</body>
</html>

前端开发监听手机调试|前端开发专业技能怎么写|前端开发技能描述

» 本文来自:前端开发者 » 《前端网站CSS扇形菜单》
» 本文链接地址:https://www.rokub.com/5132.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!