HTML5/CSS3 Circle inside a circle with inner circle stick on top inside the outer circle

Question

我把圆圈旋转了180度，我怎样才能让内圈粘在上面(不旋转它)

Answer 1

试试这个代码。我创建了我的 HTML 代码。您的类(class)只需更改即可。

CSS:

    .outer-circle{
        position: relative;
        border-radius: 50%;
        height: 300px;
        width: 300px;
        text-align: center;
        background: linear-gradient(45deg, #FB8007, #e7c506);
    }
    .outer-circle span:first-child {
        position: absolute;
        bottom: 90px;
        text-align: center;
        left: 0;
        right: 0;
        font-size: 30px;
        text-shadow: 0px 3px 0px #676464;
        color: #fff;
    }
    .inner-circle {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        margin: auto;
        text-align: center;
        padding: 33px;
        background-color: #FF5E4B;
        box-shadow: 2px 12px 10px #ccc;
        color: #fff;
        font-size: 23px;
        text-shadow: 0px 3px 0px #676464;
    }

HTML:

    <div class="outer-circle">
        <span>Vacation</span>
        <div class="inner-circle">
            <span>Summer</span>
        </div>
    </div>