Задать вопрос
@YoManYo
*
html

Нарезка и вёрстка нестандартного шаблона?

Всем привет. Попался мне шаблон у которого секции не прямоугольные. Я пробовал его нарезать, но у мня вышло не очень хорошо всё это(код ниже будет) и пытался всё делать с помощью клипартов. В общем я зашел в тупик. Подскажите как правильно верстать такие секции. Код с использованием after

<div class="wrapper">
<header>
</header>

<section class="spiker">
</section>


</div>

* {
  box-sizing: border-box;
}

.wrapper{
  max-width: 970px;
}

header {
  width: 100%;
  min-height: 1086px;
  background-image: url(http://s020.radikal.ru/i718/1610/53/2e62f2d87942.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

.spiker {
  width: 100%;
  min-height: 1371px;
  background-image: url(http://s017.radikal.ru/i416/1610/f3/0f627944ef70t.jpg);
  background-repeat: no-repeat;
  background-size: contain;

}

.spiker::after {
  width: 100%;
  height: 163px;
  top: 20px;
  position: absolute;
  background-image: url(http://s45.radikal.ru/i110/1610/c3/9837344ef991t.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
    
}


Код с клипартами

<body>
  <header></header>
  <section class="section1"></section>
</body>


body {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
header{
  width: 280px;
	height: 280px;
	background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
}
.section1{
  width: 280px;
	height: 280px;
	background: #1e90ff;
	-webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%);
clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%);
}


c1f91bc9292c4480abff41d7fe7b0b14.jpg
  • Вопрос задан
  • 302 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
zorro76
@zorro76
Почитай вот-тут , да и на форуме здесь вопрос 100500 раз подымался
Ответ написан
Комментировать
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Без нормального кода в песочнице, отвечать буду кратко)
Обычные блоки с обычным бекграундом.
Добавляешь им отрицательный маргин и позитион релитив.
Ответ написан
3 комментария
3 комментария
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Самый простой метод это CSS трансформации блока.

.container {
  transform: skewY( 5deg);
  padding: 0;                  
}
.container > .content {
  transform: skewY(-5deg);
  margin: -2em;                       /* подбираеш чтобы покрыть искаженный блок */
  padding: 3em;                       /* подбираеш чтобы влазил внутренний текст */
  background-image: url(http://s45.radikal.ru/i110/1610/c3/9837344ef991t.jpg);
}
Ответ написан
8 комментариев
8 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Натянуть верстку Опенкарт
24 апр. 2024, в 15:34
20000 руб./за проект
SEO с опытом в контентных проектах (СМИ)
24 апр. 2024, в 15:32
130000 руб./за проект
Видеомонтаж трэвел-влогов на Youtube на постоянной основе
23 апр. 2024, в 11:13
10000 руб./за проект
Ещё заказы