<h1 class="cp_h1title"><span>見出しテキスト</span></h1>
.cp_h1title {
position: relative;
overflow: hidden;
height: 36px;
padding: 0;
text-align: center;
}
.cp_h1title:before,
.cp_h1title:after {
position: absolute;
display: block;
width: 20px;
height: 36px;
content: '';
border: 1px solid #00897b;
}
.cp_h1title:after {
top: 0;
right: 2px;
}
.cp_h1title span:before,
.cp_h1title span:after {
position: absolute;
display: block;
width: 30px;
height: 55px;
content: '';
transform: rotate(-30deg);
background: #fafcfc;
}
.cp_h1title span:before {
top: -15px;
left: 9px;
border-left: 1px solid #00897b;
}
.cp_h1title span:after {
z-index: 2;
top: 0;
right: 9px;
border-right: 1px solid #00897b;
}