在父方格中放置旋转的正方形？

Question

我想创建一个容器的50％的正方形（和自动高度？）。在这个正方形中，我想要一个旋转的方块，它指向父母边界（不溢出）。它也必须有响应。

.square { 
    height: 50%; 
    width: 50%; 
    .square-inner { 
     transform: rotate(45deg); 
     background: red; 
     height: ??: 
     width: ??; 
    } 
} 

Answer 1

可以使用相对和绝对位置，&比例绘制它

看到以下内容：

.square { 
 
    width: 50%; 
 
    padding-top: 50%; 
 
    background:blue; 
 
    position: relative;  
 
} 
 
.square-inner { 
 
     transform: rotate(45deg); 
 
     background:red; 
 
     height: 70%; 
 
     width: 70%; 
 
     margin:auto; 
 
     position: absolute; 
 
    top:15%; 
 
    left:15%; 
 
    }

<div class="square"> 
 
<div class="square-inner"> 
 

 

 
</div> 
 

 
</div>

Answer 2

如果x是侧面的长度外部正方形sqrt(2)/2 * x（≈0.707x）应该是内部长度广场。 （more about the math）

在青菜没有sqrt功能，我们可以估算像这样（more math）：

@function sqrt($square, $tolerance: .001, $estimate: $square/2) { 
    @if abs($square - $estimate*$estimate) < $tolerance { 
     @return $estimate; 
    } 
    @return sqrt($square, $tolerance, ($estimate + $square/$estimate)/2); 
} 

你顶嘴将为：

$size: 200px; 
$halfSqrt2: sqrt(2)/2; 

.square { 
    height: $size; 
    width: $size; 
    background: pink; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    .square-inner { 
     transform: rotate(45deg); 
     background: red; 
     height: $halfSqrt2 * $size; 
     width: $halfSqrt2 * $size; 
    } 
} 

PS：

width: 50%; 
height: 50%; 

不会给你一个方形，除非容器是一个正方形。