タイトルの中央にアイコンを乗せたようなタイトルデザインを作ってみます。
◆まずはデモページをご覧ください。
デモページを見るHTML
<div class="icon_box">
<div class="icon_img"><img src="img/apple.svg"></div>
<p class="ttl_text">アイコンを使用したタイトル</p>
</div>
<div class="icon_img"><img src="img/apple.svg"></div>
<p class="ttl_text">アイコンを使用したタイトル</p>
</div>
CSS
/* ---タイトルの背景--- */
.icon_box {
position: relative;
text-align: center;
padding: 5px 0;
border-radius: 15vw;
background: #df5656;
}
.icon_box {
position: relative;
text-align: center;
padding: 5px 0;
border-radius: 15vw;
background: #df5656;
}
/* ---アイコンの背景--- */
.icon_img {
position: absolute;
width: 100px;
height: 100px;
top: -50px;
right: 0;
left: 0;
margin: 0 auto;
border-radius: 50%;
background: #df5656;
}
/* ---アイコン--- */
.icon_img img {
position: absolute;
width: 35px;
height: 35px;
top: 10px;
right: 0;
left: 0;
margin: 0 auto;
}
/* ---タイトル--- */
.ttl_text {
position: relative;
color: #fff;
font-size: 1.5rem
}
複雑な作りではありませんので、コピペですぐに実装できるかと思います。
また、横幅を「％」で指定してあげれば、レスポンシブにもなります。