<div class="demo demo1"> <div class="wrapper"> <div class="caption">毎朝ちゃんと飲むUX</div> <div class="heading">UX MILK</div> </div> </div>
.demo { width: 500px; margin: 0 auto; padding: 10px 0; font-family: sans-serif; font-size: 20px; color: #3cb3e4; } .heading { margin: 10px 0 } .demo1 .wrapper { padding: 5px; text-align: center; border: 3px solid; border-top: none; width: 500px; } .demo1 .wrapper .caption { -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); overflow: hidden; margin: -5px -8px 0 -8px; position: absolute; width: 516px; font-size: 16px; } .demo1 .wrapper .caption:before, .demo1 .wrapper .caption:after { content: ""; position: absolute; width: 100%; margin-top: -2px; border-top: 3px solid; top: 50%; } .demo1 .wrapper .caption:before { -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); margin-left: -30px; } .demo1 .wrapper .caption:after { margin-left: 30px; }