我想创建一个容器的50%的正方形(和自动高度?)。在这个正方形中,我想要一个旋转的方块,它指向父母边界(不溢出)。它也必须有响应。在父方格中放置旋转的正方形?
.square {
height: 50%;
width: 50%;
.square-inner {
transform: rotate(45deg);
background: red;
height: ??:
width: ??;
}
}
我想创建一个容器的50%的正方形(和自动高度?)。在这个正方形中,我想要一个旋转的方块,它指向父母边界(不溢出)。它也必须有响应。在父方格中放置旋转的正方形?
.square {
height: 50%;
width: 50%;
.square-inner {
transform: rotate(45deg);
background: red;
height: ??:
width: ??;
}
}
可以使用相对和绝对位置,&比例绘制它
看到以下内容:
.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>
如果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%;
不会给你一个方形,除非容器是一个正方形。
我用上面的答案去了,但是谢谢你的回答! –
感谢您的回答,作品像魅力! –