Фоновая техника SVG?

Question

Для создания фоновых узоров (треугольник, трапеция и т. Д. c.) Я вижу, что многие разработчики полагаются на SVG. Сегодня я столкнулся с техникой, которую не совсем понимаю.

Масштабированием такой формы:

и применяя height: 100%, а также transform-origin, создается треугольник. Начальной точкой треугольника всегда является нижний левый угол содержащего элемента. Результат приятный и отзывчивый, но я понятия не имею, почему это работает с точки зрения геометрии c.

Я создал Codepen для демонстрации.

.shape {
  position: absolute;
  width: 100%;
}

.shape-img {
  padding-bottom: 10rem;
  overflow: hidden;
  background: yellow;
  position: inherit;
  width: inherit;

}

.shape-img > svg {
  position: inherit;
  height: 100%;
  width: inherit;
  transform: scale(2);
  transform-origin: top center;
}

.position-relative {
  position: relative;
}

<div class="position-relative">
      <div class="shape">
        <div class="shape shape-img">
          <svg viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg>
        </div>
      </div>
    </div>

<br />
<br />
<!-- 
<svg viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg>
-->

1. Как этот подход гарантирует, что нижний левый угол находится внизу содержащего элемента?

2. Как этот подход гарантирует, что пользователь увидит треугольник независимо от размера экрана?

Answer 1

Вот более простая идея с тем же SVG и только одним div:

.box {
  height:200px;
  background: 
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg>') 
     top/  /* place it at the top center (no need "center" because it's by default) */
     200% 200%, /* width height (twice bigger as the container*/
     yellow; /* background color */
}

<div class="box"></div>

Чтобы понять эффект масштаба, см. Ниже:

.box {
  border:5px solid red;
  margin:50px auto;
  width:200px;
  height:100px;
  position:relative;
} 
.box svg {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform:scale(2);
  transform-origin:top center;
}

<div class="box">
  <svg viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg>
</div>

---

Кстати, вы можете использовать более простой SVG, где у вас есть только треугольная форма:

.box {
  height:200px;
  background: 
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><polygon points="0,1 1,0 1,1" fill="black"/></svg>'),
     yellow; 
}

<div class="box"></div>