calc() functionを利用して、ダイヤ形を操作する

CSS Advent Calendar 2017 - 12月8日の記事です。

図のように、正方形を45度傾けたダイヤ形では対角線の長さが幅高さになります。
200px四方の正方形で言うと、1辺の長さ × √2 で *282.842712474px* となります。
√2 は 1.41421356237 （「ひとよひとよにひとみごろ...」）です。
ちなみに、値に指定した小数点以下の解釈はブラウザで異なります。

また、今回の例では左上の角を基準に時計回りに45度傾けることでダイヤ形にしているので、
原点も左上の角にしたく、そのために translate() も指定しています。
※ transform の値は指定する順番が重要で、前後入れ替えると位置が変わってしまいます。

css

.dia.one {
    width: 20px;
    height: 20px;
    transform-origin: 0 0; /* 左上の角を基準 */
	transform: translate(calc(1.41421356237 * 50% + 0px), calc(-1.41421356237 * 50% + 0px)) rotate(45deg);
}

codepen#.dia.one

辺の長さを元につくった、282.842712474px四方のダイヤ形でしたが、
操作するのに不便だとかでダイヤ形（対角線長）を指定したサイズで用意したい場合もあるかと思います。
今度は逆に、対角線長 ÷ √2 で1辺の長さを割り出せば良いですね。

scss

.dia.two {
	width: calc(100px / 1.41421356237);
	height: calc(100px / 1.41421356237);
	transform-origin: 0 0;
	transform: translate(calc(1.41421356237 * 50% + 0px), calc(1.41421356237 * -50% + 50px)) rotate(45deg);
	
	&::before {
		content: 'two';
	}
}

codepen#.dia.two

原点を左上角でなくてセンターにしたい場合は translate() で下記のように調整できます。

scss

.dia.three {
	width: calc(30px / 1.41421356237);
	height: calc(30px / 1.41421356237);
	transform-origin: 0 0;
	transform: translate(0, calc(1.41421356237 * -50% + 100px)) rotate(45deg);
	
	&::before {
		content: 'three';
	}
}

codepen#.dia.three

mixin

下記は引数で対角線長,水平位置,垂直位置,原点を指定できるscssのmixinにまとめた例。

codepen

scss

.left.bottom {
	@include diamond(false, 0px, 100px, top);
	// ~~~
}

.h-center.v-center {
	@include diamond(100px, 50px, 50px, center);
	// ~~~
}

まとめ

今回は使い道がよくわからないサンプルだったかも知れませんが、
ほとんどのブラウザで使用可能ですし、発想次第で非常に活躍してくれるのでお試しあれ！

参考

• codepen 円に内接する正方形にテキストをおさめる
• caniuse/calc
• IE 10 + 11: CSS transitions with calc() do not work