Sign in to follow this  
Hasiev

Наклонные секции

Recommended Posts

Здравствуйте, в макетах часто попадаются трансформированные секции (наклонные, в виде параллелограмма, или с углом внизу .. Скажите, как их делают? Подразумеваю что на css трансформациях .. Но тогда вся секция вместе с контентом поварачивается .. Или делают через псевдоэлементы? Если есть статья, или видео-урок, буду признателен ..

 

Share this post


Link to post
Share on other sites

Чтобы дочерние элементы не поворачивались, задавайте им ту же трансформацию, но со знаком минус. Вот, например 

 

А так, куча способов есть, в зависимости от макета и задач выбирают. Не у всех хорошо с адаптивностью и кроссбраузерностью.

Некоторые тут можно подсмотреть: https://css-tricks.com/creating-non-rectangular-headers/

Вообще, много примеров есть. Вы ищите по запросу CSS Skewed Background

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors