Как сделать косые блоки в Web Builder стилями ccs?

Сообщение **stedivid** » 23 ноя 2018, 23:36

Есть пример не могу подружить с проектом
смотреть пример http://gnatkovsky.com.ua/kosaya-granica-bloka-ili-granica-s-naklonom.html
Чтобы сделать такой же наклон для границ блоков, подвала или шапки сайта, нужно всего лишь воспользоваться CSS. Делается все с помощью псевдоэлементов after или before.

К примеру, у вас есть подвал footer и вы решили сделать ему границу с наклоном как в примере. Он должен быть на всю ширину экрана, то бишь - width:100%;. Ну и добавляем ему псевдоэлемент before.

footer{
margin-top:100px;
position:relative;
width:100%;
background:#212121;
}

footer:before{
content:'';
position:absolute;
top:-50px;
width:0;
height:0;
border-bottom: 50px solid #212121;
border-right: 100vw solid transparent;

Сообщение **dred** » 24 ноя 2018, 09:27

Тоже интересна эта тема, и еще момент куда потом этот код вставлять?

Сообщение **Vitamin701** » 24 ноя 2018, 11:30

dred, код вставлять в особый стиль слоя. Но мне тоже интересно , будет ли это работать в wb

Сообщение **stedivid** » 24 ноя 2018, 12:29

Vitamin701,
Я уже пере про бывал все варианты.
1. вставлял исходник страницы путь к ccs файлу между <head><link href="css/имя_файла.css" rel="stylesheet"></head>. и потом переименовывал id и в особом стиле прописывал для блока что мол тянуть стиль для оформления <div id="footer"> </div>
2. и просто создавал прозрачный слой и на него ставил HTML код
пример
<style>
footer{
margin-top:100px;
position:relative;
width:100%;
background:#212121;
}

footer:before{
content:'';
position:absolute;
top:-50px;
width:0;
height:0;
border-bottom: 50px solid #212121;
border-right: 100vw solid transparent;
}

</style>
Помогите решить проблему как сделать косые блоки

Сообщение **Alex1972** » 24 ноя 2018, 17:59

У меня всё получилось

Сообщение **spoon** » 24 ноя 2018, 18:21

проект 14.2.2

Сообщение **stedivid** » 24 ноя 2018, 23:00

Alex1972,
Подскажите как Вы реализовали это чудо. проек поддерживаю 14.1.1

Сообщение **Alex1972** » 25 ноя 2018, 00:00

Футер высотой 0.Или прозрачный.И будет виден только сектор.Это не чудо.Код с примера идет: footer{...}.Это Элемент. WB построит css по ID,То есть будет код #footer {...}.Это Идентификатор.
footer{margin-top:100px;position:relative;width:100%;background:#212121;}
footer:before{content:'';position:absolute;top:-50px;width:0;height:0;border-bottom: 50px solid #212121; border-right: 100vw solid transparent; }-Добавляет свойства к Элементу footer.А в проекте WB его-нет(если,конечно, не указали сами сематически).
В WB надо добавлять по Индентификатору-
#footer{margin-top:100px;position:relative;width:100%;background:#212121;}
#footer:before{content:'';position:absolute;top:-50px;width:0;height:0;border-bottom: 50px solid #212121; border-right: 100vw solid transparent; }
У Spoon сделано даже понятнее.Я менял css,а он вписал HTML код медиа сразу в проект и наглядно видно при предпросмотре.

Во вложении пример-- в свойствах слоя я установил сематический тег footer.В HTML вставке привязал к одному футеру(footer) сектор сверху и снизу. И теперь все элементы footer-с секторами
footer:after {content: ''; position: absolute; bottom: -50px; width: 0; height: 0; border-top: 50px solid #FFD700; border-left: 100vw solid transparent; }
footer:before {content: ''; position: absolute; top: -50px; width: 0; height: 0; border-bottom: 50px solid #4F4F4F; border-right: 100vw solid transparent; }

Пример.jpg

index.jpg

Отправлено спустя 1 час 26 минут 8 секунд:
*******************************
И вот поигрался-
********************************
footer:after { content: ''; position: absolute; bottom: -50px; width: 0; height: 0; border-top: 50px solid #FFD700; border-left: 100vw solid transparent; }

footer:before {
content: '';
position: absolute;
top: 60px; //Высота футера
width: 0;
height: 0;
border-bottom: 50px solid #4F4F4F;
border-right: 100vw solid transparent;
}

Пример2.jpg

Сообщение **dred** » 25 ноя 2018, 12:57

Похоже надо переходить на 14 версию, а то ничего не открывает в 12 :-):

Сообщение **Alex1972** » 25 ноя 2018, 18:09

Сборка проекта абсолютно одинакова для 12-ой версии.
А вот в 11-ой и ниже,собрать такое уже сложнее.Так как нет в них добавления медиазапросов в расширении <HTML>,и установок сематического тега в свойствах слоя при проектировании.

ПримерДля12.rar

Сообщение **zbscomp** » 28 ноя 2018, 14:18

Делаем 2 сдоя. Первая с картинкой, нижняя кривая будет. В свойствах слоя есть ПРЕДОПРЕДЕЛЕННЫЙ СТИЛЬ. Выбираем DIAGONAL
Скрин тут: https://ibb.co/n8BMv4Y

Отправлено спустя 1 минуту 29 секунд:
ИЗИ. Пожалуйста))

Отправлено спустя 41 секунду:
И да. Можно добавлять свои стили и менять предуствновленные)) Там же