<div class="demo demo4"> <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 } .demo4 .heading { padding: 15px 5px; margin: 10px -20px; border: solid 3px #3cb3e4; position:relative; text-align: center; border-radius: 3px; background: #fff; } .demo4 .heading:after, .demo4 .heading:before { content: ''; position: absolute; bottom: -7px; background: #3cb3e4; border: solid 2px #3cb3e4; width: 25px; height: 20px; z-index: -1; } .demo4 .heading:after { left: 2px; transform: rotate(120deg); } .demo4 .heading:before { right: 2px; transform: rotate(60deg); }