Как сделать скошенный фон?

Question

Меня очень заинтересовал вот этот вопрос о том, как можно сделать скошенный по диагонали фон.

Я эту задачу реализовал двумя способами:
с помощью псевдоэлементов :before или :after,
а также с использованием свойства clip-path.

И вот мне стало интересно: а возможно ли такое сделать с помощью SVG? И вот, что у меня получилось:

* {
  margin: 0;
  padding: 0;
}

body {
  background: url('https://wallbox.ru/wallpapers/main2/201727/1499320136595dcf486c76e6.19078340.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.page,
svg {
  position: relative;
  width: 100%;
  height: 100vh;
}

.page3 {
  position: relative;
}

.page3:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 50vh;
  background-color: burlywood;
}

.page4 {
  background: burlywood url('https://myrealdomain.com/images/imagens-de-gatos-lindos-7.png') center -35% no-repeat;
  background-size: 50%;
}

<div class="page page1">
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon id="page1" fill="chocolate" points="0 0, 100 0, 100 73, 0 100"/>
      <g fill="#fff">
	<text x="50" y="50" font-size="6px" >Котики</text>
	</g>
  </svg>
</div>
<div class="page page2">
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon id="page2" fill="white" fill-opacity="0" points="0 0, 100 0, 100 100, 0 100"/>
  </svg>
</div>
<div class="page page3">
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon id="page3" fill="pink" points="0 23, 100 0, 100 100, 0 73"/>
  <g fill="#333">
	<text x="50" y="50" font-size="4px" >Лапули, правда?</text>
	</g>
  </svg>
</div>
<div class="page page4">
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon id="page4" fill="lavender" points="0 90, 100 73, 100 100, 0 100"/>
  <g fill="#333">
	<text x="80" y="90" font-size="4px" >The end :)</text>
	</g>
  </svg>
</div>

Но так как я с SVG пока что еще на "Вы, Ваше превосходительство, Ваше преосвященство и т.д.", поэтому мне кажется, что это решение выполнено как "из под топора". Прошу указать мне на мои ошибки и по возможности их исправить. Благодарю!

БЛОГ НА HUSL

Как сделать скошенный фон?

Ответы (0 шт):