<div class="demo demo6"> <div class="heading">毎朝ちゃんと飲むUX</div> </div>
.demo { width: 500px; margin: 0 auto; padding: 10px 0; font-family: sans-serif; font-size: 20px; color:#3cb3e4; } .heading { margin: 10px 0 } .demo6 .heading { border-top: 4px solid #3cb3e4; border-bottom: 4px solid #3cb3e4; padding: 5px 20px; position: relative; width: 300px; text-align: center; margin: 30px auto; color: #3cb3e4; font-weight: bold; } .demo6 .heading:before { content: ""; border-top: 3px solid #3cb3e4; border-bottom: 3px solid #3cb3e4; display: block; position: absolute; width: calc(100% - 20px); height: 58px; top: -12px; left: 10px; } .demo6 .heading:after { content: ""; border-top: 2px solid #3cb3e4; border-bottom: 2px solid #3cb3e4; position: absolute; display: block; width: calc(100% - 40px); height: 74px; top: -19px; left: 20px; }