transform:rotate と clip で三角形を作る

0
1141
views

正方形を CSS で transform:rotate すると菱形ができます。さらにその菱形を clip して三角形を作ってみます。

疑似要素で菱形を作る

セレクタ ::after を使い、疑似要素で四角形を作ります。さらに transform:rotate で回転を加え菱形にします。

html

CSS

.outer {
    position: relative;
}
.triangle {
    position: relative;
    width: 100px;
    height: 100px;
    background: blue;
}
.triangle::after {
    content: '';
    position: absolute;
    background: rgba(255, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: rotate(45deg);
}

実行結果例

疑似要素を対象内に収める

疑似要素が対象内に収まるように位置を調整します。

CSS の書き換え

疑似要素のプロパティで、以下のように位置を書き換えます。

top: 15%;
bottom: 15%;
left: 15%;
right: 15%;

実行結果例

対象内に疑似要素が収まりました。

clip する

CSS への追記

triangle クラスのプロパティに以下の内容を書き加えます。

clip: rect(auto 50px 100px auto);

clip の値 rect は範囲を四角形に切り取ることを意味します。例示のコードでは、左から 50px 上から 100px の範囲に切り取ります。

実行結果例

三角形にする

回転させた疑似要素を clip することで、実質的にはもう既に三角形が出来ていますね。

仕上げとして、background を変更することで、三角形を完成させます。

最終的な CSS

.outer {
    position: relative;
}
.triangle {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    background: transparent;
    clip: rect(auto 50px 100px auto);
}
.triangle::after {
    content: '';
    position: absolute;
    background: blue;
    top: 15%;
    bottom: 15%;
    left: 15%;
    right: 15%;
    transform: rotate(45deg);
}

実行結果例