Как сделать отзывчивый стиль оформления с помощью формы Div или SVG, которая касается левого верхнего края страницы и правого нижнего угла страницы

Question

Как создать отзывчивый стиль оформления с использованием формы Div или SVG, которая касается левого верхнего края страницы и правого нижнего угла страницы Like This введите описание изображения здесь CLICK ME или Посмотреть это демо: demosamislam.000webhostapp.com У кого-нибудь есть идеи о том, как дизайнеры могут сделать это легко? и используют ли они SVG для украшения на теле, или с помощью 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>

Answer 2

попробуйте сделать div и повернуть его так:

   div{
  position: absolute;
  transform: rotate(45deg);
  top: 0%;
  left: 0%;
  width: 250%;
  height:250%;
}