Rustam Bainazarov

Похоже, но можно сделать проще и более универсально. Загвоздка вопроса явно именно в этом, ибо похожий радиус скругления можно добиться методом тыка по сути.

Этот вариант можно увеличивать бесконечно, меняя значение лишь одной переменной. Всё на процентах и em:



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



P. S. Я не стал вникать, какой вариант логотипа самый актуальный, поэтому взял первый из Интернета. Помимо этого, в вашем варианте есть ненужный код, который можно сократить (нет объединения одинаковых правил, border-top-left-radius и т. п.). Для более точного соответствия не бойтесь делать элементы больше родителя, чтобы получить нужный радиус скругления, для этого есть oveflow: hidden, чтобы лишнее обрезать.

Можно попробовать так:
https://petragregorova.com/articles/customize-wp-c...

Например, так:

.toc_list li > ul:not([class])>li:before {
  display: none;
}

Ну или так:

.entry-content .toc_list ul:not([class])>li:before {
  display: none;
}

Можно ещё костылём так:

.toc_list ul:not([class])>li:before {
  display: none !important;
}

А вообще, надо было дать полный код, ибо тут жёсткая иерархия.

Простой плагин для плавной прокрутки:
https://idiotwu.github.io/smooth-scrollbar/

Вроде бы нигде и ничего не ломает. Но тестировал я только в Chrome 50+, Safari 10+ и Firefox 60 и не на body, а в отдельных контейнерах.

* * * * *

А вообще, сейчас плавную прокрутку делают в крупных проектах на GSAP. Вот пример:



* * * * *

Если не нужно плавного скролла, а нужно стилизовать наивный, то вот этот вообще не ломает нативный скроллинг:
https://kingsora.github.io/OverlayScrollbars/#!overview

Вот его демо на странице с iframe:
https://kingsora.github.io/OverlayScrollbars/#!dem...


Я его тестировал за время использования в IE11, Chrome 40+, Firefox 40+, Safari 10+. Всё более чем хорошо. Вышеперечисленные же плагины меняют алгоритм работы нативного скроллинга. Точнее, тупо его его отключают. Этот же ничего не ломает.

* * * * *

P. S. Ну а вообще, скроллинг лучше вообще не трогать нативный, если это просто ради красоты.

Есть ещё много вариантов (clip, mask-image, SVG и т. п.), которые предназначены для более продвинутых эффектов. Этот вариант — самый простой и требует однородного цвета на фон, если логотип прозрачный.

Попробуйте заменить плагин на нормальный.

Например, вот этот отлично работает с динамикой безо всяких лишних взаимодействий:
https://github.com/aFarkas/lazysizes

Он просто следит за появлением новых элементов автоматически. Lazysizes — самый популярный плагин для ленивой загрузки в мире. Поддержка браузеров — начиная с IE10. Если подключить полифил, то будет IE8+. Об этом всём написано на странице проекта.

Вот древнее демо (не моё) того, как сей плагин работает с динамически созданным DOM:


Если не хотите менять плагин — нужно вызывать его инициализацию снова после получения данных и формирования DOM. Или делать модификацию плагина, чтобы он умел следить за новыми объектами.

Это баг IE11. Лечится указанием flex-basis, кроме auto. Обычно ставится либо нужное значение, либо просто 100% в качестве эдакого аналога auto.

Кстати, если нужно использовать calc() вместе с flex-basis, то нужно писать его отдельно (второй пример), а не в составе свойства flex.

Вот разные варианты, которые работают в IE11:



Ещё вместо 100% можно поставить 0% (именно с процентом, а не просто нуль) или 1px, но там были какие-то баги в этом случае в других браузерах (в Chrome какой-то версии текст за пределы такого блока выходил, например).

Если по какой-то причине нужно такое сделать только в IE11, то нужно код обернуть вот в этот хак:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Код тут будет работать только в IE10 и IE11 */
}

flex: 1 — сокращение для flex: 1 1 0.

flex: 2 будет сокращением для flex: 2 1 0 и т. д.

То есть, в таком виде устанавливается значение только для flex-grow. Вообще, это легко проверить, надо только раскрыть в инспекторе полную информацию о значении свойства (кликнуть стрелку перед ним):

Если без визуальных хаков и наложений теней, то с помощью filter: drop-shadow:

С таким подходом не надо сложных манипуляций и ерунды с position: absolute или отрицательных margin для контента, здесь весьма очевидные отступы между блоками и пр.

Сделал примитивный, но рабочий образец подобного механизма на JQuery, переделать без нено можно тоже спокойно, просто мне лень:

Вы поставили padding у родителя...

Поставьте его вашей ссылке, а не родителю:

Как там на Bootstrap — я не знаю, но можно сделать, например, так:

Переменных должно быть столько, сколько требуется для решения задачи наиболее оптимальным путём.

Если проще, быстрее, прозрачнее и логичнее сделать без переменной — делайте без переменной. Если вы понимаете, что переменная вам всё же нужна — делайте переменную.

Во многих крупных проектах многое на переменных построенно, ибо так можно многое автоматизировать. Например, в том же Bootrstrap почти всё построенно на переменных — это позволяет автоматизировать процесс кастомной сборки.

Например, делал недавно небольшой компонент кнопки — вышло порядка 35 переменных (+6 глобальных), и все они служат своей цели, лишних нет. А сегодня я делал достаточно большой компонент баннеров — там всего 6 переменных вышло (+2 глобальных). И больше не было нужно для поставленной задачи.

Словом, делайте по ситуации и технической потребности.

LOL, уже спрашивали про этот же макет, но давно и другой человек. Я за clip-path, и там я подробно описал, почему именно так:
Искажение блока с одной стороны css?

А вот, собственно, как:

Update. Описанное ниже решается с помощью CSS и writing-mode: vertical-lr

~ ~ ~

Если делать автоматически, то нужно использовать JS, ибо transform не меняет местами width и height:



Можно ставить min-height, что, в сочетании с display: flex у родителя таких блоков, позволит очень просто и без лишнего JS сделать подстройку всех элементов под высоту самого высокого в строке из них:



Если делать только на CSS, то нужно задать высоту блока:

Clip-path, но координаты опорных точек просто в процентах не надо делать, надежнее через calc(), тогда будут четкие значения. И всё будет адаптивно + контент обрезать не будет. Можно менять скос, как в примере, на разных разрешениях + можно анимировать процесс.

clip-path: polygon(0% 0%, 100% calc(0% + 60px), 100% calc(100% - 60px), 0% 100%);
/* calc(100% - 60px) -- вот тут задал четкую ширину скоса */

background-image в чистом виде (картинка) не анимируемое свойство, градиент — на данный момент это картинка, просто отрендеренная браузером из параметров свойства.

Поэтому opacity для блока.


ease у transition-timing-function указывать бессмысленно, ибо это и есть его стандартное значение (если, конечно, вы его не хотите перезадать).

background — это сборное свойство, которое состоит из background-image, background-size, background-repeat, background-position, background-color, background-attachment и background-clip — поэтому почитайте, что вы можете из этого анимировать и каким способом.

Свойство none просто отключает любое свойство (даже анимируемое), что не позволяет переходу свершиться, даже если он возможен.