CSS - ホームアイコン
HTMLとCSSを使用してホームアイコンの形を描画する方法のコード例です。
このHTMLコードはホームアイコンを描画する要素となる<div>タグのクラス名 "home-icon" を設定しています。
<div class="home-icon"></div>
ベースの要素にて屋根のパーツ、疑似要素「before」で壁を作成しています。
CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--w」を利用してホームアイコンの形に必要なすべての値を計算しますので、サイズの変更が容易です。
また、コード例ではパーツ別の形状を確認する為にパーツの色には別のものを指定しています。
/* ホームアイコン */
.home-icon {
--w: 300px; /* 基準サイズ */
position: relative;
width: var(--w);
height: var(--w);
}
/* 上部パーツ */
.home-icon::before {
content: "";
position: absolute;
top:10%;
border-bottom: calc(var(--w) / 2.5) solid orange;
border-right: calc(var(--w) / 2) solid transparent;
border-left: calc(var(--w) / 2) solid transparent;
box-sizing: border-box;
}
/* 下部パーツ */
.home-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 40%;
background-color: #4169e1;
box-sizing: border-box;
}
![CSS - ホームアイコン](/images/css/home-icon/image-ja.png)