html - css3中的多个完美环/圆

Question

<分区>

Answer 1

Here's a fiddle.

你可以摆脱的包装，它只是为了帮助在那个小窗口内显示它。 您必须自己找到正确的字体。

LINK(虽然不是很准确)

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200italic' rel='stylesheet' type='text/css'>

CSS:

    .wrapper {
        position:absolute;
        top:50%;
        left:50%;
        margin: 40px;

        }           
        div {
            border-radius: 50%;
            position: relative;
            text-align: center;
            background: #fff;
            display: inline-block;
        }

        .four {
            height: 510px;
            width: 510px;
            border: 17px solid rgb(120,245,63);
            border-top-color: #fff;
            transform: rotate(-135deg);
            margin: -315px 0 0 -315px;
            position: absolute;
            top:50%;
            left:50%;
            }

        .three {
            height: 450px;
            width: 450px;
            border: 17px solid rgb(62,170,245);
            border-top-color: #fff;
            transform: rotate(180deg);
            margin: -242px 0 0 -242px;
            position: absolute;
            top:50%;
            left:50%;    
            }
        .two {
            height: 370px;
            width: 370px;
            border: 17px solid rgb(238,31,122);
            border-top-color: #fff;
            transform: rotate(180deg);
            margin: -202px 0 0 -202px;
            position: absolute;
            top:50%;
            left:50%;  
            }
        .one {
            height: 240px;
            width: 240px;
            border: 17px solid rgb(255,147,30);
            border-top-color: #fff;
            transform: rotate(180deg);
            margin: -137px 0 0 -137px;
            position: absolute;
            top:50%;
            left:50%;
            }

        .logo {
            height: 75px;
            width: 75px;
            margin: -50px 0 0 -50px;
            position: absolute;
            top:50%;
            left:50%;
            transform: rotate(-45deg);
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 72px;
            font-style: italic;
        }

    sup {
        font-size: 16px;
        position: relative;
        bottom: 15px;
    }

HTML:

<div class="wrapper">
    <div class="four" onclick="clickMe(this)">
        <div class="three" onclick="clickMe(this)">
            <div class="two" onclick="clickMe(this)">
                <div class="one" onclick="clickMe(this)">
                    <div class="logo">MG<sup>24</sup></div>
                </div>
            </div>
        </div>
    </div>
</div>

编辑
根据@arifix 的要求。
要使圆环可单独点击，请将其添加到您的代码中，并确保将 onClick 事件监听器添加到您的圆环中。

JavaScript:

    function clickMe(element)
    {
       if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

        // Do what you want with class
        elementClass = element.className;
        console.log(elementClass);
    }