верстка 6-угольников
1,00
р.
Подскажите, кто знает как это сверстать? В интернете мало инфы по этому поводу. Спасибо)
Ответ
Полигоны можно создать с помощью SVG, указывая points по оси X & Y от 1 до 6.
Update 1.0: Добавил иконки, но есть один нюанс. Тег не действителен в SVG, поэтому я использовал иконки таким образом:
ðс1
Затем добавил font-family:
svg text { font-family: FontAwesome }
Update 1.1: Добавил анимацию вращения иконок:)
* { margin: 0 padding: 0 user-select: none } .wrapper { display: flex justify-content: center align-items: center flex-wrap: wrap } svg text { font-family: FontAwesome font-size: 1.5rem fill: #ffffff pointer-events: none transition: all .4s } .hex { fill: #FC635E stroke: #FE8682 stroke-width: 2px transition: all .4s } .hex:hover { fill: #fff stroke: #FC635E } .hex:hover+g text { fill: #FC635E transform: rotate(360deg) scale(0.9) }   
Update 1.2: Добавил решение на HTML+CSS:
* { margin: 0 padding: 0 } body { display: flex justify-content: center align-items: center flex-wrap: wrap } i { position: absolute left: 50% top: 50% color: white transform: translate(-50%, -50%) z-index: 2 } .hexagon, .hexagon::before, .hexagon::after, .fill, .fill::before, .fill::after, i { transition: 0.3s } .hexagon, .hexagon::before, .hexagon::after { background-color: #FE8682 } .fill, .fill::before, .fill::after { background-color: #FC635E } .hexagon::before, .hexagon::after { transform: translateX(-50%) scaleY(0.7) rotate(45deg) } .hexagon { position: relative margin: 3rem width: 7.7rem height: 4rem font-size: 2rem } .hexagon::before, .hexagon::after { content: "" position: absolute width: 5.4rem height: 5.4rem } .hexagon::before { top: -2.7rem left: 50% } .hexagon::after { bottom: -2.7rem left: 50% } .hexagon:hover { background-color: #FC635E } .hexagon:hover i { color: #FC635E } .hexagon:hover::after { background-color: #FC635E } .hexagon:hover::before { background-color: #FC635E } .hexagon:hover .fill { background-color: white } .hexagon:hover .fill::after { background-color: white } .hexagon:hover .fill::before { background-color: white } .fill { position: absolute left: 50% top: 50% width: 7rem height: 3.5rem z-index: 1 transform: translate(-50%, -50%) } .fill::before, .fill::after { content: "" position: absolute width: 5rem height: 5rem transform: scaleY(0.7) rotate(45deg) } .fill::before { top: -2.5rem left: 1rem } .fill::after { bottom: -2.5rem left: 1rem }
