Нужно нарисовать гексагон, внутри которого будут указаны контакты. Круг сделать легко - через border-radius
, а как сделать гексагон?
2 ответа
Вариант 1 (c использованием псевдоэлементов):
.hexagon {
width: 110px;
height: 62px;
background: #fe635e;
color:#fff;
position: absolute;
z-index: 10;
cursor: pointer;
margin: 28px;
text-align: center;
line-height: 62px;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
}
.hexagon:before {
top: -28px;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-bottom: 28px solid #fe635e;
}
.hexagon:after {
bottom: -28px;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 28px solid #fe635e;
}
<div class="hexagon">hexagon</div>
Вариант 2 (с использованием clip-path):
.hexagon {
width: 110px;
height: 110px;
background: #fe635e;
color:#fff;
position: absolute;
z-index: 10;
cursor: pointer;
margin: 28px;
text-align: center;
line-height: 110px;
-webkit-clip-path: polygon(0 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%);
clip-path: polygon(0 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%);
}
<div class="hexagon">hexagon</div>
.hexagon{
width: 200px;
height: 200px;
background: #ccc;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<div class="hexagon"></div>