HTML5 / CSS3在圆内圈，内圆棒位于外圈内侧上方

Question

我将圆圈旋转了180度，如何使内部圆圈粘在顶部（不旋转）

Answer 1

尝试使用此代码。我创建了HTML代码。您的班级仅需更改。

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>