Heading 7

HTML

<div class="demo demo7">
  <div class="heading">
    <span class="title">UX MILK</span>
    <span class="caption">毎朝ちゃんと飲むUX</span>
  </div>
</div>

CSS

.demo {
  width: 500px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
  font-size: 20px;
  color:#3cb3e4;
}
.heading {
  margin: 10px 0
}
.demo7 .heading {

}
.demo7 .heading .caption{
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 25px;
  padding-right: 40px;
  background: #3cb3e4;
  color: #fff;
}
.demo7 .heading .caption:before{
  display: block;
  content: ' ';
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  right: 99.9%;
  top: 0;
  border: 0 solid transparent;
  border-width: 50px 37px 0 0;
  border-right-color:#3cb3e4;
}
.demo7 .heading .title{
  float: left;
  padding-left: 20px;
}