Jak zrobić przejścia między sekcjami na stronie www?

pytanie zadane 20 lipca 2021 w HTML i CSS przez TeaCup Obywatel (1,370 p.)

Cześć,

Chciałem się zapytać jak zrobić przejścia między sekcjami na stronie www takie jak są na tej stronie:

1. https://mylead.global/pl

Tutaj jest zrzut ekranu z konkretnie o co mi chodzi:

2. https://ibb.co/1ZJ8Hvz

Chodzi o te trójkątne przejścia między jedną sekcją strony a drugą.

Nie wiem jak to się fachowo nazywa więc nie byłem w stanie wyszukać odpowiedniego posta. Za powtarzające się pytanie przepraszam.

Jakby ktoś napisał mi jak się takie przejścia nazywają w żargonie front-endowców oraz jak je zrobić lub być może wygenerować gdzieś gotowy kod to byłbym wdzięczny.

Pozdrawiam.

2 odpowiedzi

odpowiedź 20 lipca 2021 przez niezalogowany
wybrane 20 lipca 2021 przez TeaCup

Najlepsza

https://css-tricks.com/creating-non-rectangular-headers/

Tutaj zerknij, przykład z headerami ale jak dobrze pokombinujesz to też się przyda ...

Możesz również skorzystać z devtools w przeglądarce i podglądnąć elementy które Cię Interesują ...

Kod HTML i CSS masz jawny, dostępny więc korzystaj z funkcji inspect

Powodzenia

1	komentarz 20 lipca 2021 przez TeaCup Obywatel (1,370 p.) Dzięki za pomoc @niezalogowany.

1	komentarz 20 lipca 2021 przez niezalogowany Nie ma za co Pozdrowionka

odpowiedź 20 lipca 2021 przez VBService Ekspert (256,580 p.)
edycja 20 lipca 2021 przez VBService

Ja dodam do tego co @niezalogowany napisał

svg - Make some waves! - edytor online.

background: linear-gradient

<div class="wavy-line small"></div>
<div class="wavy-line big"></div>
<div class="wavy-line medium"></div>

body {
  background: #22313F;
}
.wavy-line {
  margin: 70px 0;
}

.small {
  height: 10px;
  background: linear-gradient(45deg, transparent 6.5710856238px, #F89406 6.5710856238px, #F89406 7.5710856238px, transparent 7.5710856238px), linear-gradient(135deg, transparent 6.5710856238px, #F89406 6.5710856238px, #F89406 7.5710856238px, transparent 7.5710856238px) 10px 0;
  background-size: 20px 10px;
}

.big {
  height: 50px;
  background: linear-gradient(45deg, transparent 25.3554281189px, #E4F1FE 25.3554281189px, #E4F1FE 45.3554281189px, transparent 45.3554281189px), linear-gradient(135deg, transparent 25.3554281189px, #E4F1FE 25.3554281189px, #E4F1FE 45.3554281189px, transparent 45.3554281189px) 50px 0;
  background-size: 100px 50px;
}

.medium {
  height: 30px;
  background: linear-gradient(45deg, transparent 18.7132568713px, #F62459 18.7132568713px, #F62459 23.7132568713px, transparent 23.7132568713px), linear-gradient(135deg, transparent 18.7132568713px, #F62459 18.7132568713px, #F62459 23.7132568713px, transparent 23.7132568713px) 30px 0;
  background-size: 60px 30px;
}

"nierówności" można jeszcze tak wykorzystać np.

<form class="login" onSubmit="return false;">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button>Sign In</button>
</form>

.login {
  overflow: hidden;
  background-color: cyan;
  padding: 40px 30px 30px 30px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  transform: translate(-50%, -50%);
  transition: transform 300ms, box-shadow 300ms;
  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}
 
.login > input {
  display: block;
  border-radius: 5px;
  font-size: 16px;
  background: white;
  width: 100%;
  border: 0;
  padding: 10px 10px;
  margin: 15px -10px;
  outline: none;
  transition: all 250ms ease-out;
}
.login > input:focus {
  box-shadow: 0 0 2px 3px rgba(2, 128, 144, 0.6);
}
.login > input::placeholder {
  padding-left: 0.25em;
  font: 0.95em/1em monospace;
  color: rgba(76, 98, 111, 0.9);
  letter-spacing: 0;
  opacity: 1;
  transition: all 800ms ease-out;
}
.login > input:focus::placeholder {
  letter-spacing: 1em;
  opacity: 0;
  padding-left: 1em;
  -webkit-filter: blur(4px);
}
.login > button {
  cursor: pointer;
  color: #fff;
  font-size: 1em;
  text-transform: capitalize;
  width: 80px;
  border: 0;
  padding: 10px 0;
  margin: 0;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #F03033;
  transition: background-color 300ms;
}
.login > button:hover {
  background-color: #FB2326;
}
.login::before, .login::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 800px;
  border-top-left-radius: 40%;
  border-top-right-radius: 45%;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 40%;
  z-index: -1;
}
.login::before {
  left: 60%;
  bottom: -130%;
  background-color: rgba(69, 105, 144, 0.15);
  animation: wawes 6s infinite linear;
}
.login::after {
  left: 35%;
  bottom: -125%;
  background-color: rgba(2, 128, 144, 0.2);
  animation: wawes 7s infinite;
}
@keyframes wawes {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}