トップ HTML/CSS レスポンシブな正八角形を作る【CSS】

レスポンシブな正八角形を作る【CSS】

CSSで正八角形を作る方法を解説します。 レスポンシブ対応版も下の方で紹介します。

CSSで正八角形を作る必要に迫られる場面なんてそうそうないと思いますけどね笑

1. 正八角形
   1. コード
   2. 解説
2. レスポンシブな正八角形
   1. コード
   2. 解説

正八角形

コード

<div class="outer">
    <div class="inner">
    </div>
</div>

.outer {
    width: 200px; /* 好きな長さ */
    height: 200px; /* 好きな長さ */
    overflow: hidden;
}
.inner {
    width: 100%;
    height: 100%;
    background-color: red;
    transform: rotate(45deg);
}

解説

divで正方形を作ります。

その内側にdivで正方形を作って色を付けます。

内側の正方形を45度回します。

外側のdivにoverflow: hiddenを指定します。

完成です。

レスポンシブな正八角形

width: 30%;みたいに定数を使わずに指定したい場合にも対応できます。

コード

<div class="outer">
    <div class="inner">
    </div>
</div>

.outer {
    width: 10%;
    padding-top: 10%;
    overflow: hidden;
    position: relative;
}
.inner {
    width: 100%;
    height: 100%;
    background-color: red;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
}

解説

heightの単位に%を使うと親のheightが基準になるのに対し、
paddingの単位に%を使うと親のwidthが基準になります。

それを使って正方形を作ります。

縦横比を一定に保ちたい場合によく使われる技ですね。

後は一緒です。