我设法实现了这个效果:http://jsfiddle.net/6z3msdwf/1/但我对标记并不满意.此外,在IE 10/11中有一个奇怪的错误,当您调整窗口大小时会显示1px间隙.
有没有其他方法可以做到这一点？或者也许在IE中解决这个问题.
编辑圆圈不能使用边框,它应该是透明的.
body,
html {
font-size: 18px;
}
body {
background-color: #fff
}
.avatar {
width: 90px;
height: 90px;
position: absolute;
background-color: red;
top: -115px;
left: 5px;
border-radius: 80px;
}
.wrap {
display: block;
margin: 100px auto 0 auto;
width: 90%;
position: relative;
}
.rect-left,
.rect-right {
position: relative;
width: 50%;
height: 150px;
float: left;
}
.rect-left {
margin-left: -50px;
}
.rect-right {
margin-right: -50px;
}
.inner {
position: absolute;
top: 0;
left: …