Pozycjonowanie dwóch <div> względem siebie

0

Witam, mam problem z zbudowaniem animacji - łączenie figur by finalnie wyszedł z nich domek. Obecnie posiadam kwadrat, chciałem zbudować dach - wyczytałem w Internecie że trójkąt możemy zrobić za pomocą samych borderów. Wszystko szło dobrze do momentu, kiedy miałem za pomocą top i left ustawić dach na prostokącie, totalnie nie wiem jak wyliczyć wysokość, z szerokością nie było problemu, drugi problem, który zauważyłem, że podstawa trójkąta nie jest całkowicie równa z bokiem prostokąta, tutaj też problem z wyliczeniem - mimo, że zastosowałem taką samą wartość jak szerokość prostokąta. Z wysokością kombinowałem ze wzorem jak wysokość trójkąta równobocznego, ale chyba to nie ten trop.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Domek</title>
    <style>
      html {
        font-family: arial, sans-serif;
      }
      span {
        position: absolute;
        top: 7%;
        left: 7%;
        padding: 20px 20px;
        background-color: brown;
        color: white;
        cursor: pointer;
      }
 
      div {
        position: absolute;
        top: 90%;
        left: 20%;
        width: 0;
        height: 0;
        background-color: brown;
        transition: 1s;
      }
 
      span:hover + div:nth-child(2) {
        top: 50%;
        left: 50%;
        width: 25vw;
        height: 40vh;
        transform: translate(-50%, -50%);
      }
 
      div:nth-of-type(2) {
        top: 45%;
        left: calc(50% - 25vw / 2);
        width: 0;
        height: 0;
        border-left: 25vh transparent solid;
        border-right: 25vh transparent solid;
        border-bottom: 25vh black solid;
        background-color: transparent;
      }
    </style>
  </head>
 
  <body>
    <span>BUDUJEMY</span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>
1

Obecnie posiadam kwadrat, chciałem zbudować dach - wyczytałem w Internecie że trójkąt możemy zrobić za pomocą samych borderów.

Ale po co? To sztuka dla sztuki ew. dobre do prostych haków.

Ale jak chcesz coś bardziej zaawansowanego robić z wektorami, to można użyć SVG np.

<svg>
  <path d="M 0,100 L 100,100 L 100,40 L 0, 40" fill="grey" stroke="black"/>
  <path d="M 0,40 L 100,40 L 50, 10 Z" fill="red" stroke="red"/>     
</svg>

https://jsfiddle.net/rcwanydh/

Jeszcze możesz użyć clip-path w CSS - czyli robisz normalnie elementy HTML, ale w CSS stylujesz, żeby je "powycinać". Np.

<div class="triangle"></div>

.triangle {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}

https://jsfiddle.net/wympb38d/

inne przykłady: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

chociaż napisali w tabelce kompatybilności, że na Safari nie działają animacje w tym clip-path, więc może być to problematyczne (chociaż jak przypuszczam chodzi o animację samej maski)

0

Super, dziękuje za podanie alternatywy z trójkątem, aczkolwiek nadal jest problem z ułożeniem tych divów pod sobą. Chciałem zastosować calc, ale nie mam pojęcia jak dobrać wartości.

0

to może narysuj, co chcesz osiągnąć dokładnie.

0

Dokładnie coś takiego, dlatego miałem problem jak ułożyć(dach)

0

To zależy jaką techniką chcesz to zrobić, ale tak czy siak dajesz odpowiednie współrzędne. Nawet tu calc nie potrzebne, wystarczyłoby position: absolute i właściwości top, left albo transform, żeby ustawić pozycję na stronie.

0

Czyli top i left: 50%, a potem na około transform? Bo wypozycjonowanie w środku jest proste, chodzi mi np o dach.

0
crav21 napisał(a):

Witam, mam problem z zbudowaniem animacji - łączenie figur by finalnie wyszedł z nich domek. Obecnie posiadam kwadrat, chciałem zbudować dach - wyczytałem w Internecie że trójkąt możemy zrobić za pomocą samych borderów. Wszystko szło dobrze do momentu, kiedy miałem za pomocą top i left ustawić dach na prostokącie, totalnie nie wiem jak wyliczyć wysokość, z szerokością nie było problemu, drugi problem, który zauważyłem, że podstawa trójkąta nie jest całkowicie równa z bokiem prostokąta, tutaj też problem z wyliczeniem - mimo, że zastosowałem taką samą wartość jak szerokość prostokąta. Z wysokością kombinowałem ze wzorem jak wysokość trójkąta równobocznego, ale chyba to nie ten trop.

Jak chcesz zrobić takie cuda, to moim zdaniem lepiej jest użyć Canvas.

1 użytkowników online, w tym zalogowanych: 0, gości: 1