h1#sample1 {
  position: relative;
  padding: 0.5em;
  background: #0079c3;
  color: white;
}

h1#sample1::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(0, 60, 97);
}

h1#sample2 {
  color: #0079c3;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #0079c3;/*上線*/
  border-bottom: solid 3px #0079c3;/*下線*/
  background: #ffffff;
}

h1#sample3 {
  color: #464646;
  position: relative;
  padding: 1rem .5rem;
  background: #ffffff;
}

h1#sample3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#12c433), to(#0079c3));
  background-image: -webkit-linear-gradient(right, #12c433 0%, #0079c3 100%);
  background-image: linear-gradient(to left, #12c433 0%, #0079c3 100%);
}

h1#sample4 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  background: #ffffff;
  color: #464646;
}

h1#sample4:before, h1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

h1#sample4:before {
  border-left: solid 1px #0079c3;
  border-top: solid 1px #0079c3;
  top:0;
  left: 0;
}

h1#sample4:after {
  border-right: solid 1px #0079c3;
  border-bottom: solid 1px #0079c3;
  bottom:0;
  right: 0;
}

h1#sample5 {
  font-size: 2em;
  color: #464646;
  background: #ffffff;
}

h1#sample5:first-letter {
  font-size: 2em;
  color: #0079c3;
}

h1#sample6 {
  position: relative;
  color: #ffffff;
  padding: 0.1em;
  text-shadow: 0 0 2px white;
  background: #7fbce1;
  z-index: -4;
  border-radius: 0 10px 10px;
}

h1#sample6:before {
  content: "";
  position: absolute;
  background: #0079c3;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

h1#sample7 {
  color: #ffffff;
  padding: 0.5em;
  line-height: 1.3;
  background: #0079c3;
  vertical-align: middle;
  border-radius: 50px 0px 0px 50px;
}

h1#sample7:before {
  content: '●';
  color: white;
  margin-right: 8px;
}