Капитан Какао

Открываете иллюстратор, рисуете нужную фигуру, жмёте сохранить как и выбираете формат SVG
Затем чистите код от мусора который в него пихает иллюстратор и получаете результат:
https://jsfiddle.net/2m5eggfo/
Кстати пример резиновый, растягивается по ширение.

UPDATE 1

Так же сделал пример с размещением контента внутри SVG фигуры.
https://jsfiddle.net/2m5eggfo/1/

И это лишь один из вариантов, реализовать это можно и другими способами.

Ну что бы прям пропорционально уменьшать всю таблицу, нужно или JS скрипт пилить, или запихнуть таблицу в SVG, демо: https://jsfiddle.net/RadCor/rtqfho5v/

Что бы увидеть результат -изменяйте ширину области с результатом.

UPDATE 1
Подправил код, теперь таблица влазит целиком.
https://jsfiddle.net/RadCor/rtqfho5v/1/

UPDATE 2
Ограничил максимальный размер таблицы
https://jsfiddle.net/RadCor/rtqfho5v/2

Я всегда делаю такие вещи через background, и свойство background-size: cover

https://jsfiddle.net/RadCor/zbrdosjz/

Или можно использовать flex box и как написал Сергей, заюзать object-fit, только одного его будет мало.
В общем вот рабочий вариант, думаю Вам он точно подойдёт, результат такой же как с background-size: cover но без использования backgaround

https://jsfiddle.net/RadCor/2a1duus2/1/

Полазил по настройкам меню, нашёл как это сделать:
Выделяем необходимые фигуры, и жмём Ctrl + 8

Вот генератор CSS3 тени: www.cssmatic.com/box-shadow

А вот собственно и пример специально для вас.
https://jsfiddle.net/qmob05ok/

Конечно далёк от идеала, но я сделал его за минуту;)

Делается это так:
https://jsfiddle.net/bg1ru9rv/

Ваш SVG не работает потому, что для анимаций такого типа нужно рисовать только линиями без заливки.
То есть при отрисовки фигуры в илюстраторе вы должны использовать только инструмент Перо и ни в коем случае не замыкать линию, иначе на выходе в SVG это будет уже не линия а фигура которую анимировать нельзя.

В вашем случае так и вышло. + у вас ещё была заливка.

Повторюсь, использовать нужно только линии.

Я бы рекомендовал вам использовать SVG, лучше и гибче решения вы не найдёте.

Пример на SVG с пропорциональным изменением размера:
https://jsfiddle.net/t6pgwhsr/

Пример на SVG с изменением размера только по ширине (адаптив):
https://jsfiddle.net/t6pgwhsr/2/

Второй вариант по моему идеален, такого вы точно не достигните чистым CSS.

Вот так: https://jsfiddle.net/tL9v39hg/2/

Вот так: https://jsfiddle.net/RadCor/574nm60c/ ;)

В стили текста добавьте mix-blend-mode: difference;
Демо: https://jsfiddle.net/RadCor/eutg0wqy/1/

Вопрос решил прописав в корневой .htaccess такую строку:
AddType application/zip .zip .zipx

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
AddType application/zip .zip .zip .7z

Я бы на SVG сделал
https://jsfiddle.net/RadCor/qrr84Lah/2/

Решил вопрос с помощью preserveAspectRatio="none"
Демо: https://jsfiddle.net/RadCor/esf16w9y/3/

Сразу пришло в голову 3 Варианта.

1. Сделать картинками. То есть тупо нарезать изображения и поставить их как фоновые.
2. Сделать треугольники на css (не уверен что можно сделать их адаптивными).
3. Старым добрым SVG, тут и адаптивность и гибкость, всё как положено.

ДЕМО: https://jsfiddle.net/RadCor/ob74ucge/

А ещё есть старый добрый fieldset и legend, которые именно для этого и созданы в HTML.
https://jsfiddle.net/kuedhwya/

Пришлось усердно погуглить, что бы найти решение.
А решение оказалось очень простым.
Вместо get_template_part() использовать более низкоуровневую функцию locate_template()
include (locate_template('header.php'));

Проблема наконец-то решена, помог добрый человек с форума фордпрес

Кому вдруг пригодиться, запрос получился таким:

<?
    $args = array(
        'posts_per_page' => 10,
        'order'       => 'DESC',
        'orderby' => 'post_modified',
        'meta_query' => array(
            array(
                'key' => 'go_to_main',
                'compare' => '==',
                'value' => '1'
            )
        )
    );
    $query1 = new WP_Query( $args );
 
?>
<? while( $query1->have_posts() ) : $query1->the_post(); ?>
 html разметка выводимых записей
<? endwhile; wp_reset_postdata(); ?>

Очень много разных вариантов как это сделать.
Вот один из них: https://jsfiddle.net/mfwnco68/

Если столкнётся с такой же проблемой, вот решение, качаем плагин Search Everything
Активируем галочку на против поиска по тегам, и вуаля, поиск сразу же будет работать по тегам. Очень крутой и простой в настройках плагин.

Можно так: https://jsfiddle.net/RadCor/gqLLz9wf/3/