БЛОГ НА HUSL


CSS. Круговое расположение элементов. Абсолютное позиционирование

Автор вопроса: Аркадий

Пытался сделать круговую навигацию. Взял пример с сайта. Думаю, проблема с относительным расположением, с position:relative, position:absolute либо в примененных transform:rotate() skew(), так как изначально там были прямоугольники, которые я деформировал. Нужно сделать, чтобы ссылки (branches-list a)позиционировались точно относительно branches-list li(Повернутых относительно центров параллелограммов). Буду очень благодарен, если поможете!

.branches {
    background-color: #e5e3dc;
    height: 600px;
    padding-top: 100px;
    padding-left: 200px;
}

.branches-list {
    list-style: none;
}

.branches-list-wrapper {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 2px solid #292929;
    position: relative;
}

.branches-list__item1 {
    transform: rotate(10deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item1 a {
    transform: skew(-50deg) rotate(-10deg);
    transform-origin: 100% 100%;

}

.branches-list__item2 {
    transform: rotate(50deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item2 a {
    transform: skew(-50deg) rotate(-50deg);
    transform-origin: 100% 100%;
}

.branches-list__item3 {
    transform: rotate(90deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item3 a {
    transform: skew(-50deg) rotate(-90deg);
    transform-origin: 100% 100%;
}

.branches-list__item4 {
    transform: rotate(130deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item4 a {
    transform: skew(-50deg) rotate(-130deg);
    transform-origin: 100% 100%;
}

.branches-list__item5 {
    transform: rotate(170deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item5 a {
    transform: skew(-50deg) rotate(-170deg);
    transform-origin: 100% 100%;
}

.branches-list__item6 {
    transform: rotate(210deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item6 a {
    transform: skew(-50deg) rotate(-210deg);
    transform-origin: 100% 100%;
}

.branches-list__item7 {
    transform: rotate(250deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item7 a {
    transform: skew(-50deg) rotate(-250deg);
    transform-origin: 100% 100%;
}

.branches-list__item8 {
    transform: rotate(290deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item8 a {
    transform: skew(-50deg) rotate(-290deg);
    transform-origin: 100% 100%;
}

.branches-list__item9 {
    transform: rotate(330deg) skew(50deg);
    transform-origin: 100% 100%;
}

.branches-list__item9 a {
    transform: skew(-50deg) rotate(-330deg);
    transform-origin: 100% 100%;
}

.branches-list li {
    font-size: 50px;
    color: #292929;
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    z-index: 2;
}

.branches-list li a {
    position: absolute;
    font-size: 70px;
    text-align: center;
    color: #292929;
    top: 0;
    right: 0;
}
<section class="branches" id="branches">
    <div class="container-fluid ">
        <div class="row no-gutters">
            <div class="col d-flex justify-content-center">
                <div class="branches-list-wrapper text-center d-flex justify-content-center align-items-center">
                    <ul class="branches-list">
                        <li class="branches-list__item1">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item2">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item3">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item4">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item5">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item6">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item7">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item8">
                            <a href="#">
                                item
                            </a>
                        </li>
                        <li class="branches-list__item9">
                            <a href="#">
                                item
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


Источник

Ответы (1 шт):

Автор решения: Инквизитор

Так надо? Position:relative или absolute у круга надо было поставить.

/* ------- Branches Start ------- */

.branches-list-wrapper {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid #292929;
  position: relative;
  overflow: hidden;
}

.branches-list li {
  border: 1px solid red;
}

.branches-list li {
  transform-origin: 100% 100%;
}

.branches-list__item1 {
  transform: rotate(10deg) skew(50deg);
}

.branches-list__item1 a {
  transform: skew(-50deg) rotate(-10deg);
}

.branches-list__item2 {
  transform: rotate(50deg) skew(50deg);
}

.branches-list__item2 a {
  transform: skew(-50deg) rotate(-50deg);
}

.branches-list__item3 {
  transform: rotate(90deg) skew(50deg);
}

.branches-list__item3 a {
  transform: skew(-50deg) rotate(-90deg);
}

.branches-list__item4 {
  transform: rotate(130deg) skew(50deg);
}

.branches-list__item4 a {
  transform: skew(-50deg) rotate(-130deg);
}

.branches-list__item5 {
  transform: rotate(170deg) skew(50deg);
}

.branches-list__item5 a {
  transform: skew(-50deg) rotate(-170deg);
}

.branches-list__item6 {
  transform: rotate(210deg) skew(50deg);
}

.branches-list__item6 a {
  transform: skew(-50deg) rotate(-210deg);
}

.branches-list__item7 {
  transform: rotate(250deg) skew(50deg);
}

.branches-list__item7 a {
  transform: skew(-50deg) rotate(-250deg);
}

.branches-list__item8 {
  transform: rotate(290deg) skew(50deg);
}

.branches-list__item8 a {
  transform: skew(-50deg) rotate(-290deg);
}

.branches-list__item9 {
  transform: rotate(330deg) skew(50deg);
}

.branches-list__item9 a {
  transform: skew(-50deg) rotate(-330deg);
}

.branches-list li {
  font-size: 20px;
  color: #292929;
  width: 150px;
  height: 150px;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  z-index: 2;
}

.branches-list li a {
  position: absolute;
  font-size: 30px;
  text-align: center;
  color: #292929;
  bottom: 20%;
  left: 50%;
}
<div class="col d-flex justify-content-center">
  <div class="branches-list-wrapper text-center  position-relative d-flex justify-content-center align-items-center">

    <ul class="branches-list d-flex flex-column justify-content-between ">
      <li class="branches-list__item1">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item2">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item3">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item4">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item5">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item6">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item7">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item8">
        <a href="#">
                                item
                            </a>
      </li>
      <li class="branches-list__item9">
        <a href="#">
                                item
                            </a>
      </li>
    </ul>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.