How do I create a triangle between two divs? CSS

Issue

I would like to create a triangle like the one below:

however, I'm not quite sure how to get the triangle between the divs.

Here's the code I currently have:

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
}

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

Solution

There must be better ways, but I usually do something along these lines:

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}

.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
}

.triangle {
  position: relative;
}

.triangle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid red;
  border-right: 2px solid red;
  background: #ddd;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: -7px;
  margin-top: -5px;
}

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

Answered By - LSE