在父div内对角排列2个div

Question

我正在尝试在父div内安排2个div，这样看起来父div就被对角地分为2部分。下图将显示所需的内容

这是我尝试过的代码。

App.js

script

App.css

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;

有关如何实现此目标的任何想法或建议？。

Answer 1

您可以使用clip-path来实现：

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

.container > * {
  height: 100%;
  background: red;
}

.container :last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: blue;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
}

<div class="container">
  <div></div>
  <div></div>
</div>

但是，如果您需要更多的浏览器支持，可以使用以下旋转方式：

.container {
  width: 200px;
  height: 200px;
  position: relative;
  overflow:hidden;
}

.container > * {
  height: 100%;
  background: red;
}

.container :last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 141%; /* = 1.41 * 100% --> 1.41 = sqrt(2) */
  height: 141%;
  background: blue;
  transform-origin:top left;
  transform:rotate(-45deg);
}

<div class="container">
  <div></div>
  <div></div>
</div>