Как к фиксированному хедеру добавить вниз прозрачные треугольники?
Ответ
Варианты:
Вставляете див с бэкграундом из треугольников
Делаете много труегольников через 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
Комментариев нет:
Отправить комментарий