菱形，包裹宽度和高度

Question

好的，所以每当我尝试创建钻石时，钻石的边缘都会超出其宽度，并且我不想使用边距来解决此问题，我希望实际宽度和高度发生变化。

以下是我创建钻石形状的方法。

diamond{
width:65px;
height:65px;
border:3px solid #0E4991;
transform: rotate(45deg);
}

这是发生的情况： 图像

我该如何解决这个问题？

Answer 1

如果你有一个 65px 宽/高的元素，当你旋转时，垂直/水平尺寸会根据...因为变形是一种完全视觉效果。

因此，如果您需要旋转的元素适合 65px x 65px 的空间，则必须减小大小。

所讨论的比率是 2 的平方根 = 1.1412

因此，新的尺寸将是原始值除以该数字。

* {
box-sizing: border-box;
}
.parent {
width: 65px;
height: 65px;
margin: 3em auto;
border: 1px solid green;
position: relative;
}
.diamond {
width: calc(100%/1.4142);
height: calc(100%/1.4142);
border: 3px solid #0E4991;
position: absolute;
;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

<div class="parent">
<div class="diamond"></div>
</div>