Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
7 / 7 / 3
Регистрация: 22.02.2012
Сообщений: 114
1

Макет со скошенным фоном у блоков

09.01.2017, 22:35. Показов 1499. Ответов 9
Метки нет (Все метки)

Добрый день!
Есть задача верстки макета со скошенным, кривым, фоном у блоков. Вариантов реализации несколько - rotate самого фона, заливка :befohe и :after в виде треугольников у каждого блока или маскирование блоков. Не могу выбрать правильное направление, что менее затратно и будет легче в адаптивности. Подскажите, пожалуйста, каким вариантом воспользоваться. Макет выглядит примерно так:
0

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

Миниатюры
Макет со скошенным фоном у блоков  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.01.2017, 22:35
Ответы с готовыми решениями:

Создание адаптивных блоков с подстраивающимся фоном, Bootstrap
Есть утверждение, что 9 из 10 верстальщиков не смогут такое сверстать, так ли это? Бытует...

Расположение блоков DIV (макет сайта)
Здравствуйте. Столкнулся с проблемой, не могу определить один блок на странице, постоянно уезжает...

Вёрстка элемента со скошенным углом
Кто-то сможет подсказать,как сделать такие элементы с треугольником.

Создать правило для абзаца с собственным фоном, прозрачным фоном
Подскажите пожалуйста, как нужно выполнить задание?

9
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2529 / 1489
Регистрация: 12.07.2015
Сообщений: 6,482
Записей в блоге: 4
09.01.2017, 22:45 2
Михаил87, Нарезка и вёрстка нестандартного шаблона
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
09.01.2017, 22:47 3
Если макет верстаете, ИМХО лучше сделать svg, а если тупо потренироваться, то можно попробовать задействовать transform или градиенты, как вариант...
0
7 / 7 / 3
Регистрация: 22.02.2012
Сообщений: 114
10.01.2017, 01:56  [ТС] 4
Благодарю за ответы!
mrtoxas, я тоже решил использовать skew, но столкнулся с проблемой, быть может и не такой серьезной, но она все же есть - весь контент, помещенный в блоки со skew тоже имеет искажение, и к нему нужно применять обратное искажение, по крайней мере я нашел только этот способ решения проблемы... или я чего-то не понимаю.

Fedor92, можно более подробнее, а еще лучше пример для понимания И будет ли SVG менять свою форму при изменении ширины/высоты блока?
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
10.01.2017, 11:03 5
Цитата Сообщение от Михаил87 Посмотреть сообщение
Fedor92, можно более подробнее, а еще лучше пример для понимания И будет ли SVG менять свою форму при изменении ширины/высоты блока?
Прямо озадачили... SVG - это формат векторной картинки, вставлять естественно фоном... Кроссбраузерно, без заморочек, даже на мобильных устройствах и ретине выглядит чётко без косяков...
0
7 / 7 / 3
Регистрация: 22.02.2012
Сообщений: 114
10.01.2017, 17:42  [ТС] 6
Цитата Сообщение от Fedor92 Посмотреть сообщение
Прямо озадачили... SVG - это формат векторной картинки, вставлять естественно фоном... Кроссбраузерно, без заморочек, даже на мобильных устройствах и ретине выглядит чётко без косяков...
Я имею представление о формате SVG, но никогда с ним не работал, к сожалению. Для меня сейчас главный вопрос - будет ли изменяться угол скоса фона на таблетках и мобилках. Используя
HTML5
1
transform: skewY(3deg);
угол не меняется, но контент нужно искажать обратно. А как с SVG это будет?
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
10.01.2017, 23:02 7
Цитата Сообщение от Михаил87 Посмотреть сообщение
А как с SVG это будет?
У меня, к сожалению, на данный момент нет такого шаблона, чтобы Вам наглядно показать... Вы можете самостоятельно попробовать и посмотреть устроит Вас это или нет...
0
35 / 36 / 23
Регистрация: 31.05.2014
Сообщений: 131
11.01.2017, 12:18 8
А при маскировании возможно сделать так, чтобы не брать в расчет отсеченную часть? Размеры блока по прежнему прямоугольные.

Добавлено через 5 минут
Извиняюсь, при отсечении путем clip-path
0
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2529 / 1489
Регистрация: 12.07.2015
Сообщений: 6,482
Записей в блоге: 4
11.01.2017, 12:23 9
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
  .wrapper {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
 
.section1 {
  height: 300px;
  position: relative;
}
.section1:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  -webkit-transform: skewY(3deg);
          transform: skewY(3deg);
  -webkit-transform-origin: 100%;
          transform-origin: 100%;
}
 
.section2 {
  height: 300px;
  position: relative;
}
.section2:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  -webkit-transform: skewY(3deg);
          transform: skewY(3deg);
  -webkit-transform-origin: 100%;
          transform-origin: 100%;
}
 
.section3 {
  height: 100px;
  position: relative;
}
 
.section3:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform: skewY(3deg);
          transform: skewY(3deg);
  -webkit-transform-origin: 100%;
          transform-origin: 100%;
  background-color: #ddd;
  z-index: -1;
}
  </style>
</head>
<body>
  <div class="wrapper">
  <section class="section1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis fuga, eos eveniet similique, voluptatum alias vitae ea doloribus odio repellendus dolore et quae dolorem exercitationem hic accusamus iusto minus velit.</section>
  <section class="section2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur iusto corporis voluptas facilis, consequatur soluta cum quisquam mollitia natus sit, molestiae dolor in neque modi ullam nostrum velit perferendis veritatis!</section>
  <section class="section3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores explicabo quas tempora veritatis dolorem dolores nihil alias molestiae magnam tenetur ipsa quae, excepturi ad non culpa corporis, expedita nulla impedit.
  </section>
</div>
</body>
</html>
0
35 / 36 / 23
Регистрация: 31.05.2014
Сообщений: 131
11.01.2017, 12:35 10
Наверное я кретин) но хотел чтобы текст начинался с отсеченной области как на макете в первом сообщении. К примеру, в первую строку поместилось 2 слова, во вторую последующие 3 и потом как положено.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.01.2017, 12:35

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Макет отчета. Не получается Вывод данных о сумме в макет
Не могу разобраться с применением метода Присоединить к ТабДоку. В частности с выводом данных...

Конвертировать png c прозрачным фоном на jpg с "x" фоном
Ситуация такая. Обработал в фотошопе около 500 фото. Удалял фон (сделал прозрачным). Выложил фото...

Создать круг разделенный на 6 блоков, в центре логотип, при наведении на один из блоков он увеличивается
Доброго времени суток. Не знаю, как даже искать похожее. В общем нужно создать круг разделен на 6...

Выделить последовательно пять блоков памяти. Высвободить второй блок, после чего вывести информацию о цепочке блоков
Выделить последовательно пять блоков памяти. Высвободить второй блок, после чего вывести информацию...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.