CSSでタイトルのあしらい

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_speech01">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body {
  background: #f8f8f8;
}

/* CSSでタイトルのあしらい */

h.title_speech01 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_speech01 span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1.0em 1.5em 1.44em 1.5em;
  border-top: solid 0.08em #444;
  background: linear-gradient(63deg, transparent 47%, #444 47%, #444 53%, transparent 53%),
              linear-gradient(-63deg, transparent 47%, #444 47%, #444 53%, transparent 53%);
  background-size: 1.0em 1.0em;
  background-repeat: no-repeat;
  background-position: center bottom -0.5em;
}

h.title_speech01 span::before {
  content: '';
  position: absolute;
  bottom: 0.44em;
  width: 50%;
  left: -0.22em;
  border-top: solid 0.08em #444;
}

h.title_speech01 span::after {
  content: '';
  position: absolute;
  bottom: 0.44em;
  width: 50%;
  right: -0.22em;
  border-top: solid 0.08em #444;
}

CodePenで確認する

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_speech02">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body {
  background: #f8f8f8;
}

/* CSSでタイトルのあしらい */

h.title_speech02 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_speech02 span {
  position: relative;
  background: #FFFC7F;
  display: inline-block;
  line-height: 1.2;
  border-bottom: solid 0.08em #444;
  padding: 1.0em 1.5em;
  border-radius: 0.5em 0.5em 0 0;
}

h.title_speech02 span::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.6em solid #444;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

h.title_speech02 span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.225em solid transparent;
  border-right: 0.225em solid transparent;
  border-top: 0.45em solid #FFFC7F;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

CodePenで確認する

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_speech03">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body {
  background: #f8f8f8;
}

/* CSSでタイトルのあしらい */

h.title_speech03 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_speech03 span {
  position: relative;
  background: #FFFC7F;
  display: inline-block;
  line-height: 1.2;
  border-top: solid 0.08em #444;
  border-bottom: solid 0.08em #444;
  padding: 1.0em 1.5em;
}

h.title_speech03 span::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.6em solid #444;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

h.title_speech03 span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.225em solid transparent;
  border-right: 0.225em solid transparent;
  border-top: 0.45em solid #FFFC7F;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

CodePenで確認する