Как сделать шестиугольник в css удлиненным
Я прочитал ответ это, но я использую следующий код из здесь, чтобы сделать шестиугольник. Хотя шестиугольник реагирует, но я не могу сделать его удлиненным. Я не очень предпочитаю использовать решение с границами и хотел бы добавить классы для переопределения существующих стилей.
.socialIcon {
width: 100px;
height: 100px;
color: black;
transition: color 400ms ease-in;
}
.color {
background-color: #1ae694;
transition: background-color 500ms ease-in;
}
.hexagonWrapper {
text-align: center;
position: relative;
display: inline-block;
margin: 50px;
}
.iconContainer {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hexagon {
height: 100%;
width: calc(100% * 0.57735);
display: inline-block;
}
.hexagon:before {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: "";
transform: rotateZ(60deg);
}
.hexagon:after {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: "";
transform: rotateZ(-60deg);
}<a class = "socialIcon hexagonWrapper" href = "#" target = "_blank">
<div class = "color hexagon"></div>
<div class = "iconContainer">
<span>H</span>
</div>
</a>
Ответы 2
Обновленный ответ
Предлагаю вам воспользоваться методом Темани из этого отвечать.
Он использует несколько linear-gradient для создания фона и требует меньше элементов в HTML:
.socialIcon {
color: black;
transition: color 400ms ease-in;
}
.color {
--color: #1ae694;
background-color: var(--color);
}
.hexagonWrapper {
text-align: center;
position: relative;
display: inline-block;
}
.hexagon {
padding: 10px 60px;
display: inline-block;
background:
linear-gradient(to top right, var(--color) 49.5%, transparent 50.5%) top right / 20px 50%,
linear-gradient(to bottom right, var(--color) 49.5%, transparent 50.5%) bottom right / 20px 50%,
linear-gradient(to bottom left, var(--color) 49.5%, transparent 50.5%) bottom left / 20px 50%,
linear-gradient(to top left, var(--color) 49.5%, transparent 50.5%) top left / 20px 50%,
linear-gradient(var(--color), var(--color)) center / calc(100% - 40px) 100%;
background-repeat:no-repeat;
}
/* Added after comment */
.hexagon:hover {
--color: #aae;
}<a class = "socialIcon hexagonWrapper" href = "#" target = "_blank">
<div class = "color hexagon"><p>xxx</p></div>
</a>⋅ ⋅ ⋅
Старый ответ
Поскольку удлиненный шестиугольник больше не шестиугольник, я предлагаю вам совершенно другой способ добиться этого, используя:
- Переменные CSS для
heightиcolor, borders на псевдоэлементах для создания «треугольных» форм.
Вот отрывок:
.socialIcon {
--color: #1ae694; /* CSS Variable */
--h: 100px; /* CSS Variable */
width: 100px;
height: var(--h); /* Using CSS var */
color: black;
transition: color 200ms ease-in;
}
.socialIcon:hover {
--color: #aae;
}
.color {
background-color: var(--color); /* Using CSS var */
transition: background-color 500ms ease-in;
}
.hexagonWrapper {
text-align: center;
position: relative;
display: inline-block;
margin: 50px;
}
.iconContainer {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hexagon {
height: 100%;
width: 100%;
display: inline-block;
}
/* TAKIT: I changed everything below */
.hexagon::before,
.hexagon::after {
position: absolute;
height: 0;
width: 0;
content: "";
border: 0 solid transparent;
/* border is full height but half width, to render a thin arrow shape
This can be parameterized here: */
border-width: calc(var(--h)/2) calc(var(--h)/4); /* Using CSS var */
transition:
border-left-color 500ms ease-in,
border-right-color 500ms ease-in;
}
.hexagon::before {
left: 0;
transform: translate(-100%, 0);
border-right-color: var(--color); /* Using CSS var */
}
.hexagon::after {
right: 0;
transform: translate(100%, 0);
border-left-color: var(--color); /* Using CSS var */
}<a class = "socialIcon hexagonWrapper" href = "#" target = "_blank">
<div class = "color hexagon"></div>
<div class = "iconContainer">
<span>H</span>
</div>
</a>Используя это решение, единственное, что нужно настроить, это var: --h, чтобы получить настоящий шестиугольник или удлиненный ...
Потому что я не хочу повторять то же самое, и я не смог закрыть как дубликат, поскольку в другом вопросе нет одобренного или принятого ответа;)
@TakitIsy С вашим исходным решением я обнаружил одну проблему: если я установлю одинаковую ширину и высоту, я не получу правильный шестиугольник. Это всегда вытянутый шестиугольник.
@Ayan Я имел в виду var(--h), извините. Правда, для правильного шестиугольника ... мы можем вычислить, чтобы ввести правильное значение.
@TakitIsy возможно ли за один раз получить как удлиненный, так и правильный шестиугольник? На самом деле в моем случае мне нужно иметь три правильных шестиугольных кнопки и одну удлиненную. Они также должны иметь некоторый эффект наведения, поскольку они являются кнопками.
Мне удалось получить визуально правильный правильный шестиугольник, но в настоящее время возникают проблемы с наведением курсора на элемент для изменения цвета фона.
@Ayan Проблема во втором фрагменте связана с вашей структурой DOM. Элемент iconContainer находится над hexagon, поэтому вы не можете навести указатель мыши на hexagon. Вместо этого я предлагаю вам использовать :hover в элементе socialIcon. Я обновляю свой фрагмент. ⋅⋅⋅ Обратите внимание, что в первом фрагменте все намного проще.
Я имел в виду, что :hover намного проще, но… к сожалению, мы не можем перейти на linear-gradient.
@TemaniAfif У вас нет удивительного обходного пути для перехода на градиент?
@TakitIsy конечно;) какого перехода вы хотите достичь?
@TemaniAfif В моем 1-м фрагменте OP хочет 500ms ease-in цвета на :hover. (В результате вы можете увидеть мой второй фрагмент)
Есть ли способ сделать что-то вроде transition: --color 500ms ease-in;? (Поскольку --color - это свойство, подобное переменной… Было бы замечательно).
для затухающей анимации единственный способ - продублировать слой и поиграть с непрозрачностью следующим образом: jsfiddle.net/mcuf2rnw/5
Спасибо большое, ребята. Действительно.. :)
Самый простой способ создать «расширяемый» шестиугольник - просто поставить по одному на каждый конец контейнера и сделать так, чтобы центр был окрашен одинаково. Вот пример этого: вы можете задать отрицательные горизонтальные поля для центрального текста, чтобы при необходимости уменьшить интервалы. Я также немного очистил код генерации шестиугольника, чтобы сделать его более динамичным - если вы измените ширину элемента .hexagon, все остальное изменится вместе с ним.
.color {
background-color: #1ae694;
transition: background-color 500ms ease-in;
}
.text-content {
position: relative;
z-index: 3;
display: flex;
}
.text-content span {
margin: auto;
font-size: 18px;
}
.expandableHex {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 0;
}
.hexagon {
width: 80px;
}
.hexagon-inner {
width: 100%;
margin: auto;
padding-bottom: 173%;
display: inline-block;
position: relative;
}
.hexagon-inner:before, .hexagon-inner:after {
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
background-color: inherit;
height: 100%;
width: 100%;
content: "";
}
.hexagon-inner:before {
transform: rotate(60deg);
}
.hexagon-inner:after {
transform: rotate(-60deg);
}<!--<a class = "socialIcon hexagonWrapper" href = "#" target = "_blank">
<div class = "color hexagon"><div class = "hexagon-inner"></div></div>
<div class = "color hexagon"><div class = "hexagon-inner"></div></div>
<div class = "iconContainer">
<span>H</span>
</div>
</a>-->
<div class = "expandableHex">
<div class = "hexagon"><div class = "color hexagon-inner"></div></div>
<div class = "color text-content"><span>I'm content</span></div>
<div class = "hexagon"><div class = "color hexagon-inner"></div></div>
</div>
почему бы не какой-нибудь линейный градиент для этого;) stackoverflow.com/questions/50691853/…