<div class="headline--type13">
  <h2 class="headlineTitle">
    リボンのような見出しデザイン　テキストテキストテキストテキスト
  </h2>
</div>
                

.headline--type13 {
  display:block;
  text-align:center;
  .headlineTitle{
    font-size:1.1em;
    color:#FFF;
    text-align: center;
    padding:0.56em 1.5em;
    background: #666;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    position: relative;
    display:inline-block;
    &::before,&::after {
      content: "";
      width:1.5em;
      height:100%;
      display:block;
      background:#666;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 60% 50%);
      position: absolute;
      top: 0;
    }
    &::before {
      left: -1.45em;
    }
    &::after {
      right: -1.45em;
      transform:scale(-1,1);
    }
  }
}