jquery - 如何让父div跟随45度旋转的子div的高度

Question

我正在尝试找到一种方法，使父 div 具有旋转后的子 div 的高度。

问题似乎在于子 div 正在旋转，但父 div 知道子 div 的非旋转高度。

我需要红色盒子来覆盖整个绿色钻石。大家有推荐的吗？

提前谢谢你们。

https://codepen.io/anon/pen/KOWXRB

.parent-container {
   position: relative;
   background: red;
}

.child-diamond {
   position: relative;
   width: 500px;
   height: 500px;
   background: #1eff00;
   transform: rotate(-45deg);
   transform-origin: 50% 50%;
}

<div class="parent-container">
  <div class="child-diamond"></div>
</div>

更新 2:感谢 Rotem Lurx Horovitz 的建议。我添加了额外的 js 来在用户调整浏览器大小时重新计算 div。

$(window).resize(function () {
    fixDiamondContainerHeight();
});

$(function () {
    fixDiamondContainerHeight();
});

function fixDiamondContainerHeight() {
    //Calculate the height of the parent div for diamond shape
let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);
}

Answer 1

为了获得最大的灵 active (无论绿色方 block 有多大) - 使用 javascript 来计算新的高度，方法是将其视为直 Angular 三 Angular 形，并使用 Pythagoras Theorem :

如果公式为:a²+b²=c²

然后:c = √(a²+b²)

然后只需使用 c 的值设置parent-container 高度即可。

let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);

(示例使用 jQuery) https://codepen.io/anon/pen/jgBaVR