JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="test-wrapper">
		<div class="test">
			<div class="test__element test__element_one">
                <img class="test__element-object test__element-object_one" src="//lorempixel.com/200/200/?1" alt=""/>
			</div>
			<div class="test__element test__element_two">
				<img class="test__element-object test__element-object_two" src="//lorempixel.com/200/200/?2" alt=""/>
			</div>
		</div>
	</div>

SCSS

$loops : 0;
@function approximateSq($num, $approx) {
	$root : (( $num / $approx ) + $approx) / 2;
	@return $root;
}

@function sqrt($num) {
	$root:0;
	$testRoot : 0;
	$upperBounds : round($num / 2) + 1; //never need over half the main number. Add one just to be sure!
	$loops : $upperBounds;
	@for $test from 2 through $upperBounds {
		$sq : $test * $test;
		@if $sq <= $num {
			$testRoot : $test;
		}
	}

	$root : (approximateSq($num, $testRoot));

	@return $root;
}

.test-wrapper { padding: 100px; }

$size: 200;
$sizePx: #{$size}px;
$size2: sqrt($size * $size * 2);
$size2Px: #{$size2}px;

$offset: ($size2 - $size) / 2;
$offsetPx: #{$offset}px;

$animation-speed: 0.2s;

.test {
	width: $sizePx;
	height: $sizePx;
	position: relative;
	overflow: hidden;
}
.test__element {
	width: $sizePx;
	height: $sizePx;
	position: absolute;
	left: 0;
	top: 0;
}
.test__element-object {
	display: block;
	width: $sizePx;
	height: $sizePx;
}
.test__element_one {
	width: $size2Px;
	height: $size2Px;
	transform: rotate(45deg);
	left: -50%;
	top: -50%;
	margin-left: -$offsetPx;
	margin-top: -$offsetPx;

	overflow: hidden;
	backface-visibility: hidden;
}
.test__element-object_one {
	$margin-top: ($size2 - $size) / 2;
	$margin-left: $size2 - ($size / 2);

	transform: rotate(-45deg);
	margin-left: #{$margin-left}px;
	margin-top: #{$margin-top}px;
}


.test__element_two {
	width: $size2Px;
	height: $size2Px;
	transform: rotate(45deg);
	left: 50%;
	top: 50%;
	margin-left: -$offsetPx;
	margin-top: -$offsetPx;

	overflow: hidden;
	backface-visibility: hidden;
}
.test__element-object_two {
	$margin-left: -$size / 2;
	$margin-top: ($size2 - $size) / 2;

	transform: rotate(-45deg);
	margin-left: #{$margin-left}px;
	margin-top: #{$margin-top}px;
}