How to create an arrow content separator in CSS

Lets say you want to draw something similar to the following using only CSS.

Using :after

CSS

.container {
  margin: 2rem;
  padding: 2rem;
  border-right: solid 1px gray;
  position: relative;
  height: 200px;
  width: 0;
}
 
.container:after {
  content: "";
  background: white;
  height: 2rem;
  width: 2rem;
  border-top: solid 1px gray;
  border-right: solid 1px gray;
  position: absolute;
  top: 50%;
  right: -17px;
  transform: rotate(45deg);
  margin-top: -1rem;
}

HTML

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

DEMO

 Using parent, child elements

CSS

.container {
  margin: 2rem;
  border-right: solid 1px gray;
  position: relative;
  height: 200px;
  width: 0;
}
 
.box {
  content: "";
  background: white;
  height: 2rem;
  width: 2rem;
  border-top: solid 1px gray;
  border-right: solid 1px gray;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -1rem;
  transform: rotate(45deg);
  margin-top: -1rem;
}

HTML

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

DEMO

Using CSS skew

Using this method, the meeting points of lines in the figure don’t look sharp when you zoom in on them.

CSS

.container {
  padding: 20px;
  height: 100%;
}
 
.top {
  height: 100px;
  width: 50px;
  border-left: 1px solid darkgrey;
  border-bottom: 1px solid darkgrey;
  transform: skew(0, 45deg);
}
 
.bottom {
  margin-top: 50px;
  height: 100px;
  width: 50px;
  border-left: 1px solid darkgrey;
  border-top: 1px solid darkgrey;
  transform: skew(0, -45deg);
}

HTML

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

DEMO