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.
chcesz i masz
http://dabblet.com/gist/5476973
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?
tak, jest to wykonalne
Ja na Bootstrapie nie znam się. Bez niego można by to zrobić tak (proste, ale w sumie działa):
- Ustaw pięć elementów
<a>
w jakimś kontenerze (np.<div>
). - Ż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ć). - 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). - Żeby rozmieścić je na sobie, ostatni element musi mieć wartość własności
z-index
większą niż pozostałe (np.10
czy100
– zależy, czy inne elementy na stronie też mają ją zmienioną). - 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ścitop
lubbottom
itd.) powinno wystarczyć – ustawiasz je dla kontenera oraz dla piątego elementu. - 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:
Najprościej to w SVG.
Przecież koło w środku jest 5 div-em (
).</p>Ucięło wyżej.
<div class="cutout"></div>
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.