html - 如何使用 Div 或 SVG 形状制作响应式装饰样式，它触及页面的左上边缘到页面的右下角

Question

如何使用 Div 或 SVG 形状制作响应式装饰样式，它触及页面的左上边缘到页面的右下角像这样enter image description here CLICK ME 或查看此演示:demosamislam.000webhostapp.com有没有人知道设计师如何轻松做到这一点？以及他们是否使用 SVG 在 Body 上制作装饰，或者使用 css 或其他东西？

Answer 1

试试这个

main{
	width:500px;
	height:500px;
	background-color:gray;
	position:relative;
	overflow:hidden;
}
#rotated-box {
	width: 750px ;
	height: 50px;
	background: red;
	transform: rotate(45deg);
	position:absolute;
	top:45%;
	left:-25%;	
}

<main><div id="rotated-box"></div></main>