<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
  position: relative;
  color:#ffffff;
  background: #90CAF9;
  border-radius: 4px;
  padding: 0 0 0 45px;
}
.cp_h1title:before{
  position: absolute;
  content: '';
  top: -2px;
  left: 15px;
  width: 20px;/*リボンの幅*/
  height: 30px;/*リボンの高さ*/
  background: #1976D2;/*リボンの色*/
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 80%, 0 100%);/*リボンの形*/
}