Как сделать сложный блок в CSS [дубликат]

97
06 декабря 2020, 02:50
На этот вопрос уже даны ответы здесь:
Как сверстать направленный вниз треугольный блок? [дубликат] (2 ответа)
Закрыт 1 год назад.

Как сделать такой блок, это делается в CSS или с помощью картинки? Причем чтобы там можно было размещать блоки. Если CSS то как?

Answer 1

Вот такой вот способ извращения.

body{ 
  background-color: #F1C40F; 
  padding: 50px 0; 
  margin: 0; 
} 
 
.main-content{ 
  position: relative; 
  font-family: Arial, sans-serif; 
  color: white; 
  padding: 40px 30px; 
  overflow: hidden; 
} 
 
.main-content::before, .main-content::after{ 
  z-index: -3; 
  content: ""; 
  display: block; 
  left: 50%; 
  position: absolute; 
  width: 1000px; 
  height: 1000px; 
  border-top: none; 
  border-right: none; 
  transform:translate(-50%, -1167px) scaleX(10.0)  rotate(-45deg); 
  background-color: #34495E; 
} 
 
.main-content::before{ 
  z-index: -2; 
  background-color: #F1C40F; 
  top: 0; 
}
<body> 
<section class="main-content"> 
  <h2>Кастомные фильтры в CSS</h2> 
  <p>Встроенные CSS фильтры предлагают функционал, схожий с фильтрами в редакторах изображений — у вас        сет предустановленных, повсеместно используемых эффектов, в которых вы можете только контролировать      параметры. 
  </p> 
</section> 
</body>

READ ALSO
Как правильно убить процесс средствами Winapi/C++?
c++

Как правильно убить процесс средствами Winapi/C++?

Подскажите как корректно убить процесс средствами с++/winapi ?

 100
Перегрузка оператора[] C++
c++

Перегрузка оператора[] C++

Не компилируется, выдает ошибку: Невозможно преобразовать сущность LinkedList в int, где я неправильно перегружаю оператор?

 134
Run-Time Check Failure #2 - Stack around the variable &#39;Opad&#39; was corrupted
c++

Run-Time Check Failure #2 - Stack around the variable 'Opad' was corrupted

Дан текст, среди символов которого имеется пробелГруппа символов, предшествующая первому пробелу, представляет собой русское слово (существительное...

 125
Air Datepicker: получить диапазон даты в строке URL
jQuery

Air Datepicker: получить диапазон даты в строке URL

jQuery календарь Air DatepickerВ коде предлагаю способ получения диапазона даты в строке URL

 121