Question

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

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

Answer 1

你可以使用位置相对和绝对，＆amp;绘制百分比

请参阅以下内容：

＆＃13;

.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%;
    }

＆＃13;

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

＆＃13;

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

除非容器是正方形，否则

不会给你一个正方形。

在父方块中适合旋转的方块？

2 个答案: