Adilet Zhuman

Для этого надо использовать регулярные выражения, в данном случае такое:

var name = "Супер сериал 2018 (16 серий)";
var new_name = name.replace(/^(.*?)\(([0-9]+)(.*)$/, '$2');

Добавить следующее для псевдоэлемента

content: '';
  display: block;

background-image, если тебе нужен простофон.
background-size: cover;
background-position: center;
Если нужно именно зафиксить фоном, ещё какой-нибудь параллакс добавить на картинку, то лучше всего создать section и положить туда 2 блока - первый relative с z-index: 1, второй fixed с z-index: -1, на fixed кидаем background-image с указанными выше свойствами и height:100vh или 100%. Если нужен параллакс, то width и height увеличиваем - 100% + планируемый оффсет параллакса.

можно так https://jsfiddle.net/wq8j6sxr/3/

D3.js смотрите примеры. вот один bl.ocks.org/mbostock/1153292

owlcarousel.owlgraphic.com/docs/api-options.html

dotData
Type: Boolean
Default: false
Used by data-dot content.

Если на поддержку IE8 плевать, используем calc().
Располагаем правую границу фиксированного меню исходя из 50% ширины области просмотра за вычетом половины центрированного блока. Пример

Если плевать на поддержку IE9, то можно воспользоваться linear-gradient().
Заливаем документ градиентом с границей, рассчитанной аналогично предыдущему варианту. Пример

linear-gradient() с наклоном (прямо в самом элементе) — IE 9+
border у псевдоэлементов — IE 7+
transform:skew() (также лучше у псевдоэлементов) — IE 9+
transform:skew() (у самого элемента, а внутренний элемент скосить в обратную сторону) — IE 9+
SVG (можно фоном, можно напрямую) — IE 9+

Update: по подсказке lioklio
transform:rotate() (у псевдоэлементов с увеличенной шириной и обрезкой в одном из предков) — IE 9+