создать css hexagon «значок»

Question

Я пытаюсь создать значок, содержащий шестиугольник с номером в нем. Сам значок/элемент списка содержит некоторую информацию/имя.

это то, что я до сих пор:

.item { 
 
    display: block; 
 
    background-color: blue; 
 
} 
 

 
.item > span { 
 
    color: white; 
 
    display: inline-block; 
 
} 
 

 
.hexagon { 
 
    position: relative; 
 
    width: 65px; 
 
    height: 65px; 
 
    line-height: 65px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.hexagon span { 
 
    position: absolute; 
 
    color: white; 
 
    z-index: 2; 
 
    left: 30; 
 
} 
 

 
.hexagon:before { 
 
    color: #ef473a; 
 
    position: absolute; 
 
    content: "\2B22"; 
 
    font-size: 65px; 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
}

<div class="item"> 
 
    <div class="hexagon"><span>1</span></div> 
 
    <span class="title">TEST test</span> <!-- maximum width? > new line --> 
 
    <span class="info">something darkside</span> 
 
</div>

Это то, что я пытаюсь достичь:

Как вы можете видеть , «синий» фон должен начинаться только с кончика шестнадцатеричного агон. Ширина и высота не изменяются. Так что теперь мне интересно, будет ли проще использовать изображение, или если кто-то может помочь мне воссоздать изображение, тоже будет хорошо :)

Заранее спасибо!

Answer 1

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

Ниже приведена исходная точка, вы можете, вероятно, расширить ее до ваших потребностей.

Обратите внимание: я также изменил способ создания шестиугольника, теперь он не использует символ UTF8, а просто окрашенные границы. Это дает вам больше контроля над размером фактической шестиугольной формы.

Стоя на одном из своих концов, высота этого шестиугольника эквивалентна его диаметру (d), который, в свою очередь, в два раза длиннее одной из шести линий (линий), образующих шестиугольник. Ширина (w) этого шестиугольника равна тогда: s * sqrt(3) или .5 * d * sqrt(3).

.badge { 
 
    height: 64px; 
 
    margin-left: 35px; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    background: blue; 
 
    border: 1px solid transparent; 
 
    display: flex; 
 
    align-item: middle; 
 
} 
 
.medal { 
 
    position: relative; 
 
    margin-left: -30px; 
 
    min-width: 75px; 
 
} 
 
.count { 
 
    position: absolute; 
 
    width: 58px; 
 
    text-align: center; 
 
    line-height: 64px; 
 
    font-size: 30px; 
 
    top: -16.74px; 
 
} 
 
h3 { 
 
    max-width: 40%; 
 
    margin-right: 30px; 
 
    font-size: 14px; 
 
} 
 
p { 
 
    font-size: .875em; 
 
} 
 

 
.hexagon { 
 
    position: relative; 
 
    width: 58px; 
 
    height: 33.49px; 
 
    background-color: #ff2600; 
 
    margin: 14.74px 0 16.74px 0; 
 
} 
 

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

 
.hexagon:before { 
 
    bottom: 100%; 
 
    border-bottom: 16.74px solid #ff2600; 
 
} 
 

 
.hexagon:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 16.74px solid #ff2600; 
 
}

<div class="badge"> 
 
    <div class="medal"> 
 
    <div class="hexagon"> 
 
     <div class="count">1</div> 
 
    </div> 
 
    </div> 
 
    <h3>The HEXAGON Badge Quest</h3> 
 
    <p>You successfully posted a valid question on Stack Overflow and received an answer.</p> 
 
</div>

Answer 2

Попробуйте следующее. Я не тестировал на мобильном телефоне. Просто хром на данный момент, но он должен закрыть вас. Вам нужно будет немного поиграть с текстом, чтобы обрабатывать обертывание и калибровку внутри синей полосы, но ваш вопрос касался значка. Эффекты угла обрезают форму примерно на 10 пикселей. Таким образом, установив фиксированную высоту на планке и более высокую высоту в 10px на шестиугольнике, он сделал трюк. Затем только некоторое позиционирование и маржа, чтобы переместить вещи в положение. Удачи.

.item { 
 
    display: block; 
 
    background-color: blue; 
 
    height: 66px; 
 
    position: relative; 
 
    left: 35px; 
 
    width: 100%; 
 
} 
 

 
.item > span { 
 
    color: white; 
 
    display: inline-block; 
 
} 
 

 
.hexagon { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 66px; 
 
    height: 66px; 
 
    line-height: 66px; 
 
    text-align: center; 
 
    color: white; 
 
    top: 0; 
 
    left: -35px; 
 
} 
 

 
.hexagon span { 
 
    position: absolute; 
 
    color: white; 
 
    z-index: 2; 
 
    width: 66px; 
 
    height: 66px; 
 
    line-height: 66px; 
 
    text-align:center; 
 
    left: -0; 
 
    
 
} 
 

 
.hexagon:before { 
 
    color: #ef473a; 
 
    position: absolute; 
 
    content: "\2B22"; 
 
    font-size: 76px; 
 
    z-index: 1; 
 
    width: 66px; 
 
    height: 66px; 
 
    left: 0; 
 
    top: -5px; 
 
} 
 
.title { 
 
    position: absolute; 
 
    font-size: 1.75rem; 
 
    top: 12px; 
 
    left: 33px; 
 
    margin: 0; 
 
    text-align:center; 
 
    display:block; 
 
    height: 66px; 
 
    width: 20%; 
 
    line-height: 18px; 
 
    } 
 
.info { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 20%; 
 
    margin: 0; 
 
    text-align:center; 
 
    display:block; 
 
    height: 66px; 
 
    width: 70%; 
 
    line-height: 66px; 
 
    vertical-align: center; 
 
    }

<div class="item"> 
 
    <div class="hexagon"><span>1</span></div> 
 
    <span class="title">TEST test</span> <!-- maximum width? > new line --> 
 
    <span class="info">something darkside</span> 
 
</div>