我试图在父 div 内排列 2 个 div，这样看起来父 div 被对角线分成 2 个部分。下图将显示需要什么

这是我试过的代码。

应用程序.js

import React, { Component } from "react";
import "./App.css";

class InnerMainDiv extends Component {
  constructor() {
    super();
    this.section = React.createRef();
  }
  componentDidMount() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  }
  componentWillUnmount() {
    window.addEventListener("resize", null);
  }
  handleResize = (WindowSize, event) => {
    let h = this.section.current.clientHeight;
    let w = this.section.current.clientWidth;
    let angle = Math.atan(h / w) * 57.29577;
    let rotateProperty = "rotate(" + angle + "deg)";
    this.section.current.style.webkitTransform = rotateProperty;
    this.section.current.style.transform = rotateProperty;
    this.section.current.style.mozTransform = rotateProperty;
  };
  render() {
    return (
      <div className="maindiv">
        <section ref={this.section}>
          <div href="#1" />
        </section>
        <section ref={this.section}>
          <div href="#2" />
        </section>
      </div>
    );
  }
}

export default InnerMainDiv;

应用程序.css

html,
body,
div {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

div {
  overflow: hidden;
  position: relative;
}

section {
  position: absolute;
  top: -100%;
  height: 5000vw;
  width: 5000vh;
  background: #ccc;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

section + section {
  background: #666;
  top: 0%;
}

section div {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

关于如何实现这一目标的任何想法或建议？