Испытание: пирамиды [7/15] - Решение 100%

Курсы §36. Знакомство с SVG
1 
<svg width="540" height="290">
    <rect width="100%" height="190" fill="skyblue"/>
    <rect width="100%" height="100" fill="yellow" y="190"/>
    <polygon points="240,70 390,240 90,240" fill="goldenrod"/>
    <polygon points="350,150 450,260 250,260" fill="darkgoldenrod"/>
</svg>
3 лайка
2

Научитесь вставлять код в сообщение, иначе ваших достижений никто не увидит.
Напоминаю ( в который раз - уже не знаю), кнопка для вставки кода </> находится на панели сверху в редакторе сообщений.

3

С прямоугольниками всё поняла, а вот с треугольниками не очень. Как самой подбирать эти цифры, хотя бы приблизительно. Что означают цифры “350,150 450,260 250,260”. Вначале предположила что это точки, треугольник состоит из трёх точек, но там четыре показателя цифр. Ну и как угадать сколько должно быть цифр и какие? Перед нами треугольник, мы его видим, если с прямоугольником всё понятно, длина и ширина, то с треугольником ничего не ясно, ну никак не пойму какое отношение к этим цифрам он имеет.

4

3 пары координат:
350,150
450,260
250,260

какие проблемы?

5

теперь понятно, но я то по другому их читала, вот так:
350,
150 450,
260 250,
260.

6

Как координаты искать ?7 Каким образом ? Откройте секрет

1 лайк
7

никак, попиксельно ищите точки. если они на одной линии, то y равны у 2х точек, аналогично для горизонталей будут равны x координаты

8

Решение задания через полигоны:

Спойлеры! 
<svg width="540" height="290">
  <polygon points = '0,0  0,190 540,190 540,0' fill = 'skyblue'/>
  <polygon points = '0,190  0,290 540,290 540,190' fill = 'yellow'/>
  <polygon points = '90,240  240,70 390,240 ' fill = 'goldenrod'/>
  <polygon points = '250,260  350,150 450,260 ' fill = 'darkgoldenrod'/>
</svg>

Для того что бы не гадать сколько что пикселей занимает и т.п. советую установить экранную линейку. Я поставил расширение для Хром

Ссылка на расширение

https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme?hl=ru

9

Очень легко координаты на глаз определить.
Мы знаем высоту и ширину изображений, соответственно углы там в районе первой трети, половины и второй трети плюс-минус. А зная основание треугольника вершину подбором легко подогнать, используя кнопку “Сравнить”. Мне хватило 4 нажатий, чтобы попасть в 100%.

10 
<svg width="540" height="290">
  <polygon points="0,0 540,0 540,190 0,190" fill="skyblue" />
  <polygon points="0,190 540,190 540,290 0,290" fill="yellow" />
  <polygon points="90,240 240,70 390,240" fill="goldenrod"/>
  <polygon points="250,260 450,260 350,150" fill="darkgoldenrod"/>
</svg>