<section>
    <h2>圖說應用</h2>
    <figure>
      <div class="textBox">
        <figcaption>Lorem ipsum</figcaption>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet sint beatae itaque in eveniet ipsum cumque eaque ut recusandae, dolorem maiores placeat modi dolorum at aut aspernatur autem, quibusdam facere, atque nesciunt ratione hic quam? Quas eveniet amet a, nesciunt laboriosam, minus modi quisquam voluptatibus obcaecati qui alias inventore magnam.</p>
      </div>
      <div class="imgBox"></div>
    </figure>
    <figure>
        <div class="textBox">
          <figcaption>Lorem ipsum</figcaption>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet sint beatae itaque in eveniet ipsum cumque eaque ut recusandae, dolorem maiores placeat modi dolorum at aut aspernatur autem, quibusdam facere, atque nesciunt ratione hic quam? Quas eveniet amet a, nesciunt laboriosam, minus modi quisquam voluptatibus obcaecati qui alias inventore magnam.</p>
        </div>
        <div class="imgBox"></div>
      </figure>
    </section>
* {
  padding: 0;  margin: 0;
}
body {
  background: #212121;
  color: #fff;
  display: flex;
  justify-content: center;
}
section {
  display: flex;
  flex-direction: column;
  width: 90%;
  /* box-sizing:border-box; */
}
figure {
  /* background:#F9A825 ; */
  height: 400px;
  margin: 20px;
  display: flex;
}
figure>div {
  height: 100%;
  box-sizing: border-box;
}
.textBox {
  background: #000;
  width: calc(50% - 50px);
  padding: 2em;
}
.imgBox {
  background-size: cover;
  width: calc(50% + 50px);
}
.imgBox::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-right: 100px solid transparent;
  border-top: 400px solid #000;
}
figure:nth-of-type(1) .imgBox {
  background: url(https://zoego.tech/ex/practice/img/travel01.jpg);
  background-size: cover;
}
figure:nth-of-type(2) .imgBox {
  background: url(https://zoego.tech/ex/practice/img/travel02.jpg);
  background-size: cover;
}
figcaption{
  font-size: 1.3em;
  text-decoration: underline;
  padding-bottom: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.