Прозрачные треугольники внизу фиксированного хедера

#html #css #css3

Как к фиксированному хедеру добавить вниз прозрачные треугольники? 
    

Ответы

Ответ 1

Варианты: 


Вставляете див с бэкграундом из треугольников 
Делаете много труегольников через css и border : `border: 20px solid transparent;
  border-top: 20px solid green;
Трансформация! 


Вот код

.block {
    border: 1px solid green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    background: green;
    color: #fff;
    box-shadow: 0 0 7px #000; /* Добавляем тень для блока */
   }
   .block::after, .block::before {
    content: '';
    position: absolute;
    background: green;
    left: 20px; bottom: -11px;
    width: 20px; height: 20px;
    box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
    z-index: -1; /* Прячем за основным блоком */
    transform: rotate(45deg); /* Поворачиваем на 45º */
    -webkit-transform: rotate(45deg);
   }
   .block::before {
    z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */
    box-shadow: none; /* Прячем тень */
   } 


Источник : 

Htmlbook