JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="title">Title #1</div>
</div>

CSS

.container {
  border-top: solid 10px red;
}

.title {
  float: right;
  height: 30px;
  padding: 0 40px 0 30px;
  background-color: red;
  position: relative;
}
.title:before {
  content: '';
  border: solid 30px transparent;
  border-top-color: red;
  position: absolute;
  left: -30px;
  top: 0;
}