左右に斜線を入れたタイトル

h2 {
 display: flex;
}

h2:before,h2:after {
 content: '';
 width: 3px;/*線の太さ*/
 height: 40px;/*線の長さ*/
 background-color: #e8af00;/*線の色*/
}

h2:before { /*左側の線*/
 margin-right: 30px;
 transform: rotate(-35deg);
}

h2:after { /*右側の線*/
 margin-left: 30px;
 transform: rotate(35deg);
}

アイキャッチと線を使ったタイトル

h2:before { /*アイキャッチテキスト*/
 content: 'おすすめポイント';
 display: block;
 color: #f99f1d;
 font-size: 14px;
}

h2:after { /*下線*/
 content: '';
 display: block;
 width: 40px;
 height: 1px;
 margin-top: 10px;
 background-color: #f99f1d;
}

斜線が入ったマーカー風タイトル

h2 {
 padding: 5px 20px;
 color: #fff;
 background: repeating-linear-gradient(-45deg, #0096ff, #0096ff 8px, #63bfff 8px, #63bfff 10px);
 text-align: center;
 display: inline-block;
}

背景色・線を使ったタイトル

h2 { /*背景の指定*/
 position: relative;
 padding: 5px 20px 10px;
 background: #fff100;
 text-align: center;
 display: inline-block;
}

h2:before { /*線の指定*/
 position: absolute;
 content: '';
 top: -7px;
 left: -7px;
 width: 100%;
 height: 100%;
 border: 3px solid #000;
}

かぎかっこタイトル

h2 {
 position: relative;
 padding: 20px 25px;
 text-align: center;
 display: inline-block;
}

h2:before,
h2:after {
 position: absolute;
 content: '';
}

h2:after { /*左上の指定*/
 top: 0;
 left: 0;
 width: 30px;
 height: 30px;
 border-top: 6px double #e8af00;
 border-left: 6px double #e8af00;
}

h2:before { /*右下の指定*/
 right: 0;
 bottom: 0;
 width: 30px;
 height: 30px;
 border-right: 6px double #e8af00;
 border-bottom: 6px double #e8af00;
}