登录页面用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>

图片的类名和代码中不一样，自己对应下就好啦~

完成！