Блог

Главная - Вопросы по программированию - Шестиугольник на html с текстом и некоторыми деталями

Шестиугольник на html с текстом и некоторыми деталями

#html #css

Вопрос:

Я хочу создать веб-сайт, на котором есть шестиугольник и круг в нем, окруженный каким-либо текстом; Шестиугольник должен быть посередине. В центре должен быть круг и несколько линий, идущих к углам

Я пробовал много раз, это становится странным.

Это мой код https://jsfiddle.net/Farpee/n5Lx0qow /

 <div class="main-section sec" id="main">
        <div class="outer">
            <div class="hexagon"></div>
            <div class="circle"></div>
            <span>one</span>
            <span>two</span>
            <span>three</span>
            <span>four</span>
            <span>five</span>
            <span>six</span>
        </div>
    </div>

как настроить css?

Это изображение Спасибо, что помогли мне :]

Ответ №1:

Я понимаю, что вы ищете что-то вроде этого:

 .main-section {
  margin-top: 20vh;
}

.outer {
  position: relative;
  float: left;
  left: 50px;
  padding: 50px;
}

.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: #97d5d8;
  margin: 86.60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #97d5d8;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #97d5d8;
}

.outer span {
  position: absolute;
  z-index: 20;
}

.outer span:nth-of-type(1) {
  top: 120px;
  left: 0;
  color: red;
}

.outer span:nth-of-type(2) {
  top: 0px;
  width: 300px;
  text-align: center;
  color: green;
}

.outer span:nth-of-type(3) {
  top: 120px;
  right: 0;
}

.outer span:nth-of-type(4) {
  bottom: 120px;
  left: 0;
}

.outer span:nth-of-type(5) {
  bottom: 0;
  width: 300px;
  text-align: center;
}

.outer span:nth-of-type(6) {
  bottom: 120px;
  right: 0;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 500px;
  background-color: blue;
  position: relative;
  z-index: 99;
}

.line {
  width: 346px;
  border-bottom: 1px solid black;
  position: absolute;
  z-index: 10;
}

.line:nth-of-type(1) {
  transform: rotate(30deg);
}

.line:nth-of-type(2) {
  transform: rotate(-30deg);
}

.line:nth-of-type(3) {
  transform: rotate(90deg);
}

.relative {
  position: absolute;
  width: 100%;
  height: 350px;
  top: 50px;
  left: 0
} 
 <div class="main-section sec" id="main">
  <div class="outer">
    <div class="hexagon">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="circle">
      </div>
    </div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
    <span>five</span>
    <span>six</span>
  </div>
</div>

В долгосрочной перспективе может быть проще использовать svg, хотя для этого материала (это займет немного больше времени, чтобы научиться, но вы выиграете в долгосрочной перспективе). Также в обоих примерах (мой ответ, а также опубликованный вами код) используется много жестко закодированных данных (поэтому довольно сложно сделать его отзывчивым). Обычно вы должны стараться избегать этого.

Также, пожалуйста, обратите внимание, что я не сосредоточился на очистке css (или его улучшении). Так что вы, возможно, захотите взглянуть и на это. В основном я пытался дать вам представление о том, как вы можете этого добиться 🙂

Метки: