CSS Battle第9关实现子div穿透父容器效果求助

问题描述 #

我正在通过完成CSS Battle的挑战提升CSS能力，当前卡在第9关，现有代码已经非常接近目标效果但仍未达标，希望能得到帮助。

现有代码 #

HTML代码 #

<body>
  <div class="banner">
    <div class="center-box"></div>
  </div>
  <div class="dot"></div>
</body>

CSS代码 #

body {
  background:#222730;
  margin:0px;
  width: 400px;
  height: 300px;
}
.banner{
  background: #4CAAB3;
  width: 100%;
  height: 150px;
  margin-top: 75px;
}
.center-box{
  position:relative;
  top: -50px;
  margin-left: 75px;
  width: 150px;
  height: 150px;
  border: solid 50px #222730;
  transform: rotate(45deg);
}
.dot{
  position: absolute;
  background: #393E46;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 125px;
  left: 175px;    
}

修正方案 #

你的代码逻辑完全正确，只需要给.center-box添加和banner一致的背景色即可达标，遗漏背景色会导致中心区域透明，和目标效果不符。

修正后完整CSS代码 #

body {
  background:#222730;
  margin:0px;
  width: 400px;
  height: 300px;
}
.banner{
  background: #4CAAB3;
  width: 100%;
  height: 150px;
  margin-top: 75px;
}
.center-box{
  position:relative;
  top: -50px;
  margin-left: 75px;
  width: 150px;
  height: 150px;
  border: solid 50px #222730;
  transform: rotate(45deg);
  background: #4CAAB3; /* 新增这一行即可 */
}
.dot{
  position: absolute;
  background: #393E46;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 125px;
  left: 175px;    
}

HTML代码不需要修改，直接复用原有代码即可100%匹配目标效果。

内容的提问来源于stack exchange，提问作者PandaSITT