css3 画圆记录

   <style>
        .radar-wrapper * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

        .wrapper-container {
            width: 850px;
            height: 1000px;
            margin-top: 50px;
            position: relative;
        }

            .wrapper-container ul {
                padding: 0;
                margin: 0;
                list-style: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 0;
                transform-origin: 0 0;
            }
    </style>
    <style>
        .radar-wrapper {
            width: 800px;
            height: 800px;
            position: relative;
        }

            .radar-wrapper .wrapper-item {
                border-radius: 50%;
                overflow: hidden;
                position: absolute;
                border: 1px solid #ddd;
            }

            .radar-wrapper ul.hover {
                z-index: 99999 !important;
            }

            .radar-wrapper .p1 {
                width: 200px;
                height: 200px;
                left: 300px;
                top: 300px;
                z-index: 8;
            }

                .radar-wrapper .p1 ul li {
                    width: 100px;
                    height: 100px;
                }


                .radar-wrapper .p1 ul {
                    z-index: 8;
                }

                    .radar-wrapper .p1 ul li a:hover {
                        background: #F98484;
                    }

                    .radar-wrapper .p1 ul li a.hover {
                        background: #F98484;
                    }

            .radar-wrapper .p2 {
                width: 400px;
                height: 400px;
                left: 200px;
                top: 200px;
                z-index: 7;
            }

                .radar-wrapper .p2 ul li {
                    width: 200px;
                    height: 200px;
                }


                .radar-wrapper .p2 ul {
                    z-index: 7;
                }

                    .radar-wrapper .p2 ul li a:hover {
                        background: #E24040;
                    }

                    .radar-wrapper .p2 ul li a.hover {
                        background: #E24040;
                    }

            .radar-wrapper .p3 {
                width: 600px;
                height: 600px;
                left: 100px;
                top: 100px;
                z-index: 4;
            }

                .radar-wrapper .p3 ul li {
                    width: 300px;
                    height: 300px;
                }


                .radar-wrapper .p3 ul {
                    z-index: 4;
                }

                    .radar-wrapper .p3 ul li a:hover {
                        background: #D20707;
                    }

                    .radar-wrapper .p3 ul li a.hover {
                        background: #D20707;
                    }

            .radar-wrapper .p4 {
                width: 800px;
                height: 800px;
                left: 0px;
                top: 0px;
                z-index: 1;
            }

                .radar-wrapper .p4 ul li {
                    width: 400px;
                    height: 400px;
                }


                .radar-wrapper .p4 ul {
                    z-index: 1;
                }

                    .radar-wrapper .p4 ul li a:hover {
                        background: #880505;
                    }

                    .radar-wrapper .p4 ul li a.hover {
                        background: #880505;
                    }


            .radar-wrapper ul li {
                left: 0;
                top: 0;
                position: absolute;
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
            }

                .radar-wrapper ul li:nth-child(1) {
                    transform: rotate(0deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(2) {
                    transform: rotate(22.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(3) {
                    transform: rotate(45deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(4) {
                    transform: rotate(67.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(5) {
                    transform: rotate(90deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(6) {
                    transform: rotate(112.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(7) {
                    transform: rotate(135deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(8) {
                    transform: rotate(157.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(9) {
                    transform: rotate(180deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(10) {
                    transform: rotate(202.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(11) {
                    transform: rotate(225deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(12) {
                    transform: rotate(247.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(13) {
                    transform: rotate(270deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(14) {
                    transform: rotate(292.5deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(15) {
                    transform: rotate(315deg) skew(67.5deg);
                }

                .radar-wrapper ul li:nth-child(16) {
                    transform: rotate(337.5deg) skew(67.5deg);
                }


                .radar-wrapper ul li a {
                    background-color: #DAB7B7;
                    width: 100%;
                    height: 100%;
                    display: block;
                    transform-origin: 0 0;
                    border: 1px solid #ddd;
                }
    </style>
    <style>
        .name-wrapper {
            width: 500px;
            height: 500px;
            left: 400px;
            top: 400px;
            position: absolute;
        }

            .name-wrapper .wrapper-item {
                position: relative;
            }

            .name-wrapper ul li a {
                position: absolute;
                display: block;
                width: 100px;
                padding-left: 400px;
                border-radius: 0 0 300px 0;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                -o-transform-origin: 0 0;
                transform-origin: 0 0;
                text-decoration: none;
            }

                .name-wrapper ul li a span {
                    transform: rotate(103deg);
                    display: block;
                    text-align: center;
                    transform-origin: 3px 35px;
                }

            .name-wrapper ul li:nth-child(1) a {
                transform: rotate(0deg);
            }

            .name-wrapper ul li:nth-child(2) a {
                transform: rotate(22.5deg);
            }

            .name-wrapper ul li:nth-child(3) a {
                transform: rotate(45deg);
            }

            .name-wrapper ul li:nth-child(4) a {
                transform: rotate(67.5deg);
            }

            .name-wrapper ul li:nth-child(5) a {
                transform: rotate(90deg);
            }

            .name-wrapper ul li:nth-child(6) a {
                transform: rotate(112.5deg);
            }

            .name-wrapper ul li:nth-child(7) a {
                transform: rotate(135deg);
            }

            .name-wrapper ul li:nth-child(8) a {
                transform: rotate(157.5deg);
            }

            .name-wrapper ul li:nth-child(9) a {
                transform: rotate(180deg);
            }

            .name-wrapper ul li:nth-child(10) a {
                transform: rotate(202.5deg);
            }

            .name-wrapper ul li:nth-child(11) a {
                transform: rotate(225deg);
            }

            .name-wrapper ul li:nth-child(12) a {
                transform: rotate(247.5deg);
            }

            .name-wrapper ul li:nth-child(13) a {
                transform: rotate(270deg);
            }

            .name-wrapper ul li:nth-child(14) a {
                transform: rotate(292.5deg);
            }

            .name-wrapper ul li:nth-child(15) a {
                transform: rotate(315deg);
            }

            .name-wrapper ul li:nth-child(16) a {
                transform: rotate(337.5deg);
            }
    </style>

 

<div class="wrapper-container ">
    <div class="radar-wrapper">
        <div class="p1 wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
            </ul>
        </div>
        <div class="p2 wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
            </ul>

        </div>
        <div class="p3 wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
            </ul>

        </div>
        <div class="p4 wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
            </ul>

        </div>
        <div class="p5 wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"></a>
                </li>
            </ul>

        </div>
    </div>
    <div class="name-wrapper">
        <div class="wrapper-item">
            <ul>
                <li>
                    <a herf="javascript:void(0);"><span>语文</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>数学</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>英语</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>物理</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>化学</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>生物</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>历史</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>政治</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>地理</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>体育</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>美术</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>音乐</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>信息技术</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>通用技术</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>心理</span></a>
                </li>
                <li>
                    <a herf="javascript:void(0);"><span>学校活动</span></a>
                </li>
            </ul>
        </div>
    </div>

</div>