A seta fazendo o divisor entre as sessões vc pode fazer utilizando um ::after
na section. A seta nada mais é que um quadrado rotacionado para ficar igual um losangolo. Eu criei uma classe que chama .divisor
, é só adiciona-la na sessão que quiser a seta abaixo.
Para a Galeria, eu usei @keyframes, para fazer o efeito fade entre as imagens. Para vc acrescentar mais imagens bastar ir aumentando o tempo de animação e o delay, exemplo: .fadeimg:nth-child(2){animation-delay: 3s;}
Deixei comentado no CSS
Para entender melhor veja funcionando abaixo.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
color: #fff;
width: 100%;
background-color: black;
position: relative;
margin-bottom: 75px;
text-align: center;
box-sizing: border-box;
}
section.divisor::after {
content: "";
position: absolute;
height: 100px;
width: 100px;
background-color: black;
top: calc(100% - 50px);
left: calc(50% - 50px);
transform: rotate(45deg);
z-index: -1;
}
.slider {
width: 100%;
height: 160px; /* altura do slider */
position: relative;
overflow: hidden;
}
.slider .fadeimg {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: galeria 9s infinite;
}
.fadeimg:nth-child(1){
}
/* aqui para cada imagem que vc colocar no Slider vc tem que acrescentar um :nth-child() e colocar o delay, a troca é a cada 2segundos */
.fadeimg:nth-child(2){
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3){
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
@keyframes galeria {
33.33% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<section class="divisor">
<div class="slider">
<img class="fadeimg" src="http://placecage.com/100/100" alt="">
<img class="fadeimg" src="http://placecage.com/101/100" alt="">
<img class="fadeimg" src="http://placecage.com/102/100" alt="">
</div>
</section>
<section>
<h2>sessão 2</h2> <b>coloque nela a classe .divisor caso quera a seta abaixo</b>
</section>