Divy w okręgu wokół diva

0

Hej, z powodu kończącego się w mojej firmie stażu, chcę stworzyć sobie portfolio w Bootstrap. Wewnątrz okrągłego diva chciałbym umieścić 5 divów tak jak na obrazku poniżej. W przypadku, gdyby były to 4 divy bez piątego w środku nie byłoby problemu, natomiast nie wiem w jaki sposób sprawić, aby w środku znajdował się ten piąty. Za każdą pomoc z góry dzięki.
title

1

chcesz i masz
http://dabblet.com/gist/5476973

0

Jest to nadal Div podzielony na 4. Chciałem, aby koło w środku było piątym divem, który również po kliknięciu ma przenieść na inną podstronę. Coś takiego jest wykonalne?

0

tak, jest to wykonalne

0

Ja na Bootstrapie nie znam się. Bez niego można by to zrobić tak (proste, ale w sumie działa):

  1. Ustaw pięć elementów <a> w jakimś kontenerze (np. <div>).
  2. Żeby były obok siebie, zrób dla kontenera display: grid (można inaczej, ale dla mnie to najprostsze – oczywiście poszczególne elementy musisz w tym gridzie rozmieścić).
  3. Dla każdego z elementów ustaw odpowiednie wartości własności border-radius (jako połowę szerokości tych elementów; dla ostatniego wszystkie rogi tak samo).
  4. Żeby rozmieścić je na sobie, ostatni element musi mieć wartość własności z-index większą niż pozostałe (np. 10 czy 100 – zależy, czy inne elementy na stronie też mają ją zmienioną).
  5. Jeszcze należałoby wypozycjonować – to już trochę mniej ogarniam. Ogólnie zależy, gdzie to kółko chcesz mieć na stronie. Jeśli po prostu samo kółko, to position: absolute (wraz z ustawieniem własności top lub bottom itd.) powinno wystarczyć – ustawiasz je dla kontenera oraz dla piątego elementu.
  6. Możesz jeszcze pokombinować z zawijaniem tekstu, jeśli zechcesz jakiś w środku umieścić (może https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap).

To, co opisałem, to taki trochę patchwork, bo składowe kontenera nadal będą miały swoje części pod tym piątym elementem. Żeby elementy naprawdę wyciąć w "vanilla-CSS", to trzeba raczej skorzystać z tego, co jeszcze nie jest oficjalnym standardem: https://drafts.csswg.org/css-backgrounds-4/#corner-shaping (znaczy – nie sądzę, by gdziekolwiek działało). Jeśli potrzeba innych rozwiązań, to tu są ciekawe:

0

Najprościej to w SVG.

0

Przecież koło w środku jest 5 div-em (

).</p>
0

Ucięło wyżej.

<div class="cutout"></div>

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