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,502
    Total Members
    3,128
    Most Online
    JamesAPatel
    Newest Member
    JamesAPatel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.