8

Как можно сверстать такое семейное древо на css?

введите сюда описание изображения

1
  • 4
    Это будет что-то страшное. На одном css )
    – user355286
    21 мар 2020 в 17:13

2 ответа 2

6

Семейное древо. Решение на CSS.

* {
  margin: 0;
  padding: 0;
}

.tree {
  position: relative;
  overflow: hidden;
  padding: 0 0 20px 0;
}

.tree ul {
  position: relative;
  padding: 20px 0;
  transition: all 0.5s;
}

.tree li {
  list-style-type: none;
  float: left;
  position: relative;
  padding: 20px 5px 0 5px;
  text-align: center;
  transition: all 0.5s;
}

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 20px;
  border-top: 1px solid #ccc;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}

.tree li:only-child {
  padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 2px 0 0;
}

.tree li:first-child::after {
  border-radius: 2px 0 0 0;
}

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 20px;
  border-left: 1px solid #ccc;
}

.tree li a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
  text-decoration: none;
  color: #555;
  font-size: 16px;
  transition: all 0.5s;
}

.tree li a:hover,
.tree li a:hover+ul li a {
  border: 1px solid cornflowerblue;
  background: lightskyblue;
  color: #000;
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #999;
}

img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  opacity: 0.4;
}

.tree li a:hover img,
.tree li a:hover+ul img {
  opacity: 0.8;
}
<div class="tree">
  <ul>
    <li>
      <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Отец</a>
      <ul>
        <li>
          <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Сын</a>
          <ul>
            <li>
              <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Внук</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Дочь</a>
          <ul>
            <li>
              <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Внучка</a>
            </li>
            <li>
              <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Внук</a>
              <ul>
                <li>
                  <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Правнучка</a>
                </li>
                <li>
                  <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Правнук</a>
                </li>
                <li>
                  <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Правнучка</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#"><img src="https://ss.metronews.ru/userfiles/materials/74/741810/858x540.jpg">Внучка</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

3
  • 3
    Отличное решение, мне очень понравилось 22 мар 2020 в 7:40
  • ерунда то ерунда ..а вот как это адаптировать ? 2 апр 2020 в 16:39
  • я наверно по этому люблю svg что там это само получается 2 апр 2020 в 16:42
5

И я вставлю свои пять копеек: вариант на SVG

100% кроссбраузерно и работает везде и 100% адаптивно

text {
  font-size: 14px;
  fill: #666;
  cursor: pointer;
}

text:hover {
  fill: #000ccc;
}

rect {
  width: 100px;
  height: 25px;
  fill: #fff;
  stroke: #ccc;
}

line {
  stroke: #ccc;
  stroke-width: 2;
}

path {
  fill: none;
  stroke: #ccc;
  stroke-width: 2;
}
<svg viewBox="0 0 660 270" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="300" y="10" ry="4"/>
    <text x="335" y="27">Отец</text>
    <line x1="350" x2="350" y1="35" y2="50"/>
    <path d="m100,80 v-30 h350 v30"/>
    <rect x="50" y="80" ry="4"/>
    <rect x="400" y="80" ry="4"/>
    <text x="90" y="97">сын</text>
    <text x="435" y="97">дочь</text>
    <line x1="100" x2="100" y1="105" y2="125" />
    <rect x="50" y="125" ry="4"/>
    <text x="75" y="142">правнук</text>
    <line x1="450" x2="450" y1="105" y2="125"/>
    <path d="m200,155 v-30 h400 v30"/>
    <line x1="450" x2="450" y1="125" y2="155"/>
    <rect x="150" y="155" ry="4"/>
    <rect x="400" y="155" ry="4"/>
    <rect x="550" y="155" ry="4"/>
    <text x="180" y="172">внучка</text>
    <text x="437" y="172">внук</text>
    <text x="580" y="172">внучка</text>
    <line x1="450" x2="450" y1="180" y2="210"/>
    <path d="m340,240 v-30 h210 v30"/>
    <line x1="450" x2="450" y1="210" y2="240"/>
    <rect x="290" y="240" ry="4"/>
    <rect x="400" y="240" ry="4"/>
    <rect x="510" y="240" ry="4"/>
    <text x="308" y="257">правнучка</text>
    <text x="425" y="257">правнук</text>
    <text x="528" y="257">правнучка</text>
  </g>
</svg>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.