登錄頁面用css畫出圓弧--logo與主體分離

公司UI出了一張設計圖，logo和主體間是一個圓弧分割開來的。

我們看一下下面應該如何來做：

首先，我們可以把它拆分成這個樣子：

這個樣子又分爲兩小步：
父元素：


則代碼爲：

.login_plate {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 520px;
    height: 252px;
    margin-left: -260px;
    margin-top: -126px;
    border-radius: 3px;
    overflow: hidden;
}
.login_loginBackground {
    border: 321px solid #ffffff;
    position: absolute;
    width: 730px;
    height: 730px;
    border-radius: 50%;  // 決定logo形狀
    top: calc(50% - 494px);
    right: -105px;
}

<div class="login_plate">
	<div class="login_loginBackground"></div>
</div>

原理： 就是用子元素的border（#fff）把父元素（隱形的存在）覆蓋住，然後父元素把超出的部分overflow： hidden就可以了。

其次就是logo和內容的填充了：


直接上代碼：

.login__main {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 520px;
    height: 252px;
    margin-left: -260px;
    margin-top: -126px;
    border-radius: 3px;
    /* -webkit-box-shadow: 0 20px 40px rgba(31, 45, 58, 0.6); */
    /* box-shadow: 0 20px 40px rgba(31, 45, 58, 0.6); */
}
.login__loginlogo {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #fff;
    left: 50%;
    top: 0;
    margin-top: -43px;
    margin-left: -40px;
    border-radius: 50%;
    /* -webkit-box-shadow: 0 2px 2px rgba(31, 45, 58, 0.6); */
    /* box-shadow: 0 2px 2px rgba(31, 45, 58, 0.6); */
}
.login__loginform {
    text-align: center;
    margin-top: 62px;
}

<div class="login__main">
	<div class="login__loginlogo">
		<img alt="" src="/company-logo.png">
	</div>
	<form class="login__loginform">表單區域自己填寫</form>
</div>

圖片的類名和代碼中不一樣，自己對應下就好啦~

完成！