Ankhena

Псевдоэлементы мало чем отличаются от обычных элементов, кроме того, что не существуют в DOM.
Они добавляются соответственно до или после основного содержимого блока.
Специально пример без стилей (только рамочки для видимости) пустого и не пустого блоков https://jsfiddle.net/y8jpbgax/
т.е. это тоже самое, как если бы вы в начале и в конце div'а написали бы 2 span'а.

А как визуально накладываются псевдоэлменты?

А дальше как зададите, так и наложатся. Опять же визуально без разницы, span'ы (или div'ы) это были или псевдоэлементы.

Вот так https://jsfiddle.net/wx6mg2mj/
Только не понятно зачем флекс

Ссылку и подчеркивайте, вот так: https://jsfiddle.net/t4k993r2/

Надо задать ширину для meta, иначе он просто вылезает за пределы родителя.
https://jsfiddle.net/p0vzcvds/
Вам только доработать отступы, чтобы ... нормально помещались.

https://jsfiddle.net/Ankhena/m8zgqtzt/

<main>
  <table>
    <tr>
      <td>ss</td>
      <td>ss ss</td>
      <td>ss ssss</td>
      <td>ss</td>
      <td>ss</td>
    </tr>
  </table>
  <div>Текст не больше ширины таблицы.</div>
</main>

main {
  position: relative;
  display: inline-block;
  outline: 1px solid #999;
}

table {
  background: #aaa;
}

div {
  position: absolute;
  background: #eee;
}

Я, как обычно, за фон градиентом, без всяких трансформаций. Если что, то этот градиенто-фон можно задавать для before|after
https://jsfiddle.net/Ankhena/oa0ka25b/

background: linear-gradient(-45deg, #eee 50%, #000 50.1%);

В один div
https://jsfiddle.net/Ankhena/4bzutwac/
угол и размеры под себя адаптируйте

Можно не вторым фоном, а к ::after.

div {
    width: 80%;
    height: 300px;
    margin: 20px auto;
    background: linear-gradient(to right top, transparent 49.8%, #fff 50.2%) no-repeat right / 100px 100%, url(http://zastavok.net/main/priroda/1446112087.jpg) no-repeat top center / cover;
}

https://web-font-generator.com/ Загрузите туда ttf или otf, в ответ сервис выдаст шрифты во всех нужных форматах и css для подключения. Вероятно, нужно будет поправить пути к шрифтам.

https://jsfiddle.net/Ankhena/43zzxkpa/ Адаптируйте под свою задачу

.row {
  display: flex;
}

https://jsfiddle.net/2c9L13g3/3/

Как-то так https://jsfiddle.net/nuvveo53/

А еще лучше так (и с текстом): https://jsfiddle.net/Ankhena/kmkos2zx/

Доработать требуется calc и позиционирование. Надо посчитать углы и на js вставлять.
(Может и без js можно обойтись, надо подумать)

Либо clip-path.

transform-origin: left bottom;

https://jsfiddle.net/Ankhena/sesh72sn/ время анимации указать равное времени смены слайдов

https://jsfiddle.net/f24ozu0z/

.second {
  position: relative;
  height: 300px;
  margin-top: -150px;
  background: radial-gradient(100% 50% at center top, transparent 49.8%, gray 50.2%);
  z-index: 2;
}

В градиент еще можно поиграть, повыравнивать

у .preview-top стоит font-size: 0
Верните детям нормальные значения, будет текст.

Добавьте для .nav-menu li:

.nav-menu li {
  display: inline-block;
  width: 100%;
}

https://jsfiddle.net/5n3318ht/

Не вполне понятно, что значит div вместо img.

Вариант 1: base64 в тег img
https://jsfiddle.net/q65c0Lnv/

Вариант 2:
Блок всегда сохраняющий пропорции https://jsfiddle.net/Ankhena/cLhxv7eq/
Но эти пропорции надо знать.

Тык зачем нижний градиент прозрачный и маленький?
https://codepen.io/anon/pen/KZxKrg