在 parent 正方形中放置旋转正方形？

Question

我想创建一个占容器 50%（和自动高度？）的正方形。在这个正方形中，我想要一个旋转的正方形，它指向 parents 边界（没有溢出）。它还必须具有响应性。

.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)

在sass中没有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);
}

您的 sass 将是：

$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%;

除非容器是正方形，否则不会给你正方形。

在 parent 正方形中放置旋转正方形？

Fit rotated square in parent square?

css

sass

mixins