Задать вопрос
@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
  • Вопрос задан
  • 306 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    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 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик / фронтендер для браузерного расширения
DevTeam.Space
от 1 000 до 2 000 $
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Web-разработчик
ЭНДИ Консалтинг
от 40 000 до 40 000 ₽
Ещё вакансии