<div class="headline--type12">
  <h2 class="headlineTitle">
    立体的な見出しのデザイン　テキストテキストテキストテキスト
  </h2>
</div>
                

.headline--type12 {
  display:block;
  text-align:center;
  .headlineTitle{
    font-size:1.1em;
    color:#FFF;
    text-align: center;
    padding:0.8em 1.5em;
    background: #666;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    position: relative;
    display:inline-block;
    &::before,&::after{
      content: "";
      height: 0;
      width: 0;
      border: 0.4em solid transparent;
      border-top: 0.4em solid #333;
      position: absolute;
      top: 100%;
    }
    &::before {
      border-left: 0.4em solid #333;
      right: 0;
    }
    &::after {
      border-right: 0.4em solid #333;
      left: 0;
    }
  }
}