CSSでタイトルのあしらい

プレビューイメージ

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

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

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

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

body {
  background: #f8f8f8;
}

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

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

.rhombus-title01 span {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 3.5em 1.5em;
}

.rhombus-title01 span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 5.5em;
  height: 5.5em;
  z-index: -1;
  background-color: #FFFC7F;
  transform: rotate(45deg);
}

CodePenで確認する

プレビューイメージ

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

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

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

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

body{ 
  background:#f8f8f8;
}

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

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

.rhombus-title02 span {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 3.5em 1.5em;
}

.rhombus-title02 span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 5.5em;
  height: 5.5em;
  z-index: -1;
  background-color: #FFFC7F;
  transform: rotate(45deg);
}

.rhombus-title02 span::after {
  content: '';
  position: absolute;
  height: 0.3em;
  width: 7em;
  right: 0;
  bottom: 23%;
  left: 0;
  margin: auto;
  border-top: solid 0.08em #444;
  border-bottom: solid 0.08em #444;
  z-index: 1;
}

CodePenで確認する

プレビューイメージ

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

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

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

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

body{ 
  background:#f8f8f8;
}

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

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

.rhombus-title03 span {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 3.5em 1.5em 3.5em 1.5em;
}

.rhombus-title03 span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 5.5em;
  height: 5.5em;
  z-index: -1;
  background-color: #FFFC7F;
  transform: rotate(45deg);
}

.rhombus-title03 span::after {
  content: '';
  position: absolute;
  height: 0.35em;
  width: 7em;
  right: 0;
  bottom: 23%;
  left: 0;
  margin: auto;
  z-index: 1;
  background: linear-gradient(45deg, transparent 46%, #444 46%, #444 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, #444 46%, #444 54%, transparent 54%);
  background-size: 0.7em 0.7em;
  background-repeat: repeat no-repeat;
}

CodePenで確認する