css - 旋转然后根据父尺寸调整大小

Question

仅使用 CSS(无 js)是否可以旋转带有背景图像的 div，然后设置宽度和高度以适应屏幕？没有 CSS SVG 裁剪可以做到吗？我不想要 SVG 没有特别的原因。只是问它是否可能。

我不介意 HTML 结构。您可以建议尽可能多的 div 或容器

Answer 1

你可以像下面这样用css制作钻石

html

<div id="diamond"></div>

CSS

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

我找到了一个我认为与您的问题相似的示例。

CodePen