Sectional divider and slider

Question

Good people, can anyone tell me how to make a sectional splitter in html and css? Like this:

I would also like to add a simple slider to stay in the header occupying the full-width screen, but I’m having trouble trying to make one, someone give me a little help?

Thank you!

Answer 1

The arrow making the divider between sessions you can do using a ::after in Section. The arrow is nothing more than a rotated square to look like a rhombus. I created a class what call .divisor, just add it in the session you want the arrow below.

For Gallery, I used @keyframes to fade between images. To add more images simply increase the animation time and delay, for example: .fadeimg:nth-child(2){animation-delay: 3s;} I left it in the CSS

To better understand see working below.

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>