JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
 <h3 class="container">上部斜め</h3>
 <div class="angle--top-left">
      <img src="https://picsum.photos/1500/500" class="angle__content">
    </div>
    </div>

  <div class="demo">
    <h3 class="container">下部斜め</h3>

    <div class="angle--bottom-left">
      <img src="https://picsum.photos/1600/500" class="angle__content">
    </div>
  </div>

  <div class="demo">
    <h3 class="container">上下</h3>

    <div class="angle--both-left-right">
      <img src="https://picsum.photos/1640/500" class="angle__content">
    </div>
  </div>

  <div class="demo">
    <h3 class="container">背景色</h3>

    <div class="angle--colour angle--both-right-right">
      <h2 class="header-colour__text">foo</h2>
    </div>

CSS

/* MIT https://github.com/NigelOToole/angled-edges */
.angle--top-left {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@supports not ((-webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%)) or (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%))) {
  .angle--top-left::before, .angle--top-left::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--top-left::before {
    top: 0;
    border-width: 8vw 100vw 0 0;
    border-color: #fff transparent transparent transparent;
  }
}

.angle--top-right {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%);
}

@supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%)) or (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%))) {
  .angle--top-right::before, .angle--top-right::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--top-right::before {
    top: 0;
    border-width: 8vw 0 0 100vw;
    border-color: #fff transparent transparent transparent;
  }
}

.angle--bottom-left {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
}

@supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw))) or (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw)))) {
  .angle--bottom-left::before, .angle--bottom-left::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
 ...