如何用HTML和CSS实现中心交汇的全屏四三角形布局？

问题背景 #

我尝试用HTML和CSS将网页分割为4个在屏幕中心交汇的三角形，但每次调整三角形为半宽时布局都会混乱。以下是我之前的代码：

body {
    margin: 0;
    padding: 0;
  }
  
  .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  .triangle {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
  }
  
  .top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 100vh solid #FF5733;
  }
  
  .left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-top: 50vh solid transparent;
    border-bottom: 50vh solid transparent;
    border-right: 100vw solid #C70039;
  }
  
  .bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 100vh solid #581845;
  }
  
  .right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-top: 50vh solid transparent;
    border-bottom: 50vh solid transparent;
    border-left: 100vw solid #900C3F;
  }
  
  @media (max-width: 767px) {
    .triangle {
      width: 100vw;
      height: 0;
    }
    
    .top, .left, .bottom, .right {
      border-style: solid;
      border-width: 0;
    }
    
    .top {
      border-color: #FF5733 transparent transparent transparent;
      border-bottom-width: 50vh;
      transform: none;
    }
    
    .left {
      border-color: transparent #C70039 transparent transparent;
      border-right-width: 50vw;
      transform: none;
    }
    
    .bottom {
      border-color: transparent transparent #581845 transparent;
      border-top-width: 50vh;
      transform: none;
    }
    
    .right {
      border-color: transparent transparent transparent #900C3F;
      border-left-width: 50vw;
      transform: none;
    }
  }

解决方案 #

要实现四个三角形在屏幕中心交汇的效果，核心是让每个三角形的顶点落在屏幕中心，底边分别对齐屏幕四条边。修改后的完整实现如下：

HTML结构 #

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

修改后的CSS代码 #

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

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

/* 顶部三角形：底边在顶部，顶点在中心 */
.top {
  top: 0;
  left: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 50vh solid #FF5733;
}

/* 左侧三角形：左边在左边缘，顶点在中心 */
.left {
  top: 0;
  left: 0;
  border-top: 50vh solid transparent;
  border-bottom: 50vh solid transparent;
  border-right: 50vw solid #C70039;
}

/* 底部三角形：底边在底部，顶点在中心 */
.bottom {
  bottom: 0;
  left: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-top: 50vh solid #581845;
}

/* 右侧三角形：右边在右边缘，顶点在中心 */
.right {
  top: 0;
  right: 0;
  border-top: 50vh solid transparent;
  border-bottom: 50vh solid transparent;
  border-left: 50vw solid #900C3F;
}

/* 移动端保持一致布局逻辑 */
@media (max-width: 767px) {
  .triangle {
    width: 0;
    height: 0;
  }
  
  .top, .left, .bottom, .right {
    border-style: solid;
  }
}

关键修改说明 #

• 移除不必要的transform偏移：每个三角形直接定位在屏幕边缘，通过边框尺寸自动延伸到中心
• 调整边框尺寸为屏幕的一半：将原来的100vh/vw改为50vh/vw，确保每个三角形只占据屏幕的1/4象限，四个顶点精准交汇在中心
• 简化移动端样式：保留桌面端的边框写法，避免样式冲突，确保跨设备显示效果统一

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