时间戳

首页 > 解决方案 > 如何使父 div 跟随 45 度旋转子 div 的高度

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

问题描述

我正在尝试找到一种方法，可以让父 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);
}

标签： jqueryhtmlcss

解决方案

为了获得最大的灵活性（无论绿色正方形有多大） - 使用 javascript 来计算新高度，方法是将其视为直角三角形，并使用毕达哥拉斯定理：

如果公式是： a²+b²=c²

那么： c = √(a²+b²)

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

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

推荐阅读