先用边框制作出4个三角形 然后利用背景颜色的 白色或者透明度rgba 实现隐藏其它3个三角形（像剥洋葱一样慢慢 使用浮动完成）

好的，下面是HTML和CSS代码实现：

HTML代码：

<div class="triangle-container">
  <div class="triangle top-left"></div>
  <div class="triangle top-right"></div>
  <div class="triangle bottom-left"></div>
  <div class="triangle bottom-right"></div>
</div>

CSS代码：

.triangle-container {
  width: 200px;
  height: 200px;
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  position: absolute;
}

.top-left {
  border-top: 100px solid white;
  border-right: 100px solid transparent;
}

.top-right {
  border-top: 100px solid white;
  border-left: 100px solid transparent;
  right: 0;
}

.bottom-left {
  border-bottom: 100px solid white;
  border-right: 100px solid transparent;
  bottom: 0;
}

.bottom-right {
  border-bottom: 100px solid white;
  border-left: 100px solid transparent;
  right: 0;
  bottom: 0;
}

实现效果如下：


这里我们使用了 `border` 属性制作了四个三角形。其中 `top-left` 三角形的上边框为白色，右边框为透明；`top-right` 三角形的上边框为白色，左边框为透明，且向右浮动；`bottom-left` 三角形的下边框为白色，右边框为透明，且向下浮动；`bottom-right` 三角形的下边框为白色，左边框为透明，且同时向右和向下浮动。最后，我们通过设置背景颜色为白色，或者透明度为0，来隐藏三角形。