百度前端技术学院 任务四：定位和居中问题

任务：

http://ife.baidu.com/task/detail?taskId=4

效果图：

有用的参考资料：

• CSS3水平垂直居中对齐：http://www.w3cplus.com/css/vertically-center-content-with-css
• CSS Clip属性：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
• CSS3圆环倒计时效果(帮助我回忆起了Clip这个东西):http://www.yangqq.com/web/css3demo/index.html
• CSS居中教程：https://css-tricks.com/centering-css-complete-guide/
• 定位详解(关于position的种种)：http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

思路：

灰色矩形使用relative定位，然后设定left与top为50%，由于已经知道框的大小，用margin把长款的一半距离补回来就行了。
两个扇形在矩形的div内部，使用绝对定位，用border-radius做圆角，clip:rect剪切。

代码：

CodePen: http://codepen.io/idailylife/full/QNqJXe/

<div class="rectangle">
  <div id="left_top" class="qcircle">
  </div>
  <div id="right_bottom" class="qcircle">
  </div>
</div>

.rectangle{
  position: absolute;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top:-100px;
  background-color: #ccc;
}
.qcircle{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50px;
  background-color:#fc0;
}
#left_top{
  top: -50px;
  left: -50px;
  clip:rect(50px, 100px, 100px, 50px);
}
#right_bottom{
  right: -50px;
  bottom: -50px;
  clip:rect(0, 50px, 50px, 0);
}