Шестиугольная кнопка / элемент

@thefair · Регистрация: 15.05.2011

Студворк — интернет-сервис помощи студентам

всем добра, подскажите пожалуйста, как реализовать шестиугольную (не равнобедренную) кнопку или элемент чтобы при наведении (на шестиугольную область, а не прямоугольную) менялся цвет внутри шестиугольника. и чтобы внутри была возможность поместить текст.
пример:
Название: hexagon.png
Просмотров: 103

Размер: 1.1 Кб

Название: hexagon.png
Просмотров: 103

Размер: 1.1 Кб

hover, focus:
Название: hexagon_hover.png
Просмотров: 103

Размер: 1.2 Кб

@thefair · 31.01.2016, 23:19 **[ТС]**

Можно и с использованием js или любыми способами

@Fedor92 · 31.01.2016, 23:31

thefair, могу подкинуть код равнобедренного без границ...

@newJS · 01.02.2016, 06:39

Можно карты использовать, тогда может быть и без js обойдётся.
вот похожее
Дизайнерское меню

@thefair · 01.02.2016, 15:01 **[ТС]**

newJS, на сколько я понимаю ховер карте без js не прикрутишь

и как бы реализовать надпись, именно текстовую посреди картинки?

@Cdelphi78 · 01.02.2016, 15:12

Fedor92, мне подкинете?
newJS, а что есть такой тег map?

@thefair · 01.02.2016, 15:12 **[ТС]**

Fedor92, можно, хоть на равнобедренный посмотрю

@Fedor92 · 01.02.2016, 15:32

Сообщение от Cdelphi78

Fedor92, мне подкинете?

Сообщение от thefair

Fedor92, можно, хоть на равнобедренный посмотрю

По просьбам трудящихся...

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hex</title>
    <style>
    .hex {
    width:148px;
    height:86px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;           
    -webkit-background-size: auto 173px;                            
    -moz-background-size: auto 173px;                           
    -ms-background-size: auto 173px;                            
    -o-background-size: auto 173px;                         
    position: relative;
    float:left;
    text-align:center;
    margin-left:5px;
    zoom:1;
}
 
.hex.hex-1.hex-gap:hover{background:blue}
    
    .hex.hex-gap {
        margin-left: 86px;
        margin-top:50px;
    }
 
    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;                                
        z-index:-2;                     
        overflow:hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;         
        backface-visibility: hidden;
    }
    
    .hex .corner-1 {
        z-index:-1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    
        
    }
    
    .hex .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
 
    }
    
    .hex.hex-1 {
        background: #74cddb;
    }
    
    a{text-decoration:none; display:block; text-align:center; vertical-align:middle; font:14px/86px Tahoma}
    </style>
</head>
<body>
    <div class="hex hex-1 hex-gap">     
        <div class="inner"><a href="#">Кнопка</a></div>     
        <div class="corner-1"></div>
        <div class="corner-2"></div>        
    </div>
</body>
</html>

Основан на transform без топорной прорисовки с треугольниками...

Границы конечно тоже можно сделать, но это смотрится коряво... Вчера решил Вам код написать - получился ответ в другую тему... В общем код сверху...

@Cdelphi78 · 01.02.2016, 15:51

Fedor92, а вон оно что, спасибо.)

@thefair · 01.02.2016, 15:56 **[ТС]**

Fedor92, интересный вариант, спасибо. но на сколько я понял чтобы весь шестиугольник стал ссылкой, блок <a /> тоже нужно шестигранить? и сделать его НЕ равнобедренным или с бордером стилями не получится, правильно?

@Fedor92 · 01.02.2016, 16:39

Сообщение от thefair

но на сколько я понял чтобы весь шестиугольник стал ссылкой, блок <a /> тоже нужно шестигранить?

Верно...

Сообщение от thefair

и сделать его НЕ равнобедренным или с бордером стилями не получится, правильно?

Бордер прорисовать можно при желании, но получится не очень хорошо... Чтобы сделать его ассиметричным необходимо комбинировать стили... Если граница значения не имеет вот ещё один вариант только нельзя выделить границы и на масштабировании есть косяки:

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hex</title>
    <style>
#hexagon {
    display:block;
    width: 100px;
    height: 35px;
    background: red;
    position: relative;
    margin-top:200px;
    text-align:center;
    font:14px/35px Tahoma;
    text-decoration:none
    
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}
 
#hexagon:hover{background:gray; color:white}
#hexagon:hover:before{border-bottom: 25px solid gray; color:white}
#hexagon:hover:after {border-top: 25px solid gray; color:white}
   </style>
</head>
<body>
    <a href="#" id="hexagon">Кнопка</a>
</body>
</html>

Лучший способ сделать шестиугольник либо использовать картинку - либо сделать svg...

@thefair · 01.02.2016, 20:39 **[ТС]**

Fedor92,

либо сделать svg...

смотрел я в сторону svg, но так и не понял как там реализовать текст внутри картинки и как сделать ховер. + можно ли этот элемент засунуть в label. Если есть какой-то пример, тобуду очень признателен

@newJS · 02.02.2016, 06:52

Сообщение от Cdelphi78

а что есть такой тег map?

Здрасте, картина Репина, "Пушной зверёк в гостях"

Сообщение от thefair

на сколько я понимаю ховер карте без js не прикрутишь

картинка даст больше художественных возможностей.
А про JS нытьё только и слышно, а любой сайт посмотри, там сотни кил библиотек прикручено.
P.S.
А те кого он выключен, так они в курсе..

@Protos73 · 02.02.2016, 09:57

del

@Fedor92 · 02.02.2016, 11:03

Сообщение от thefair

Если есть какой-то пример, тобуду очень признателен

Опытных примеров, к сожалению нет, только теория...

Предлагаю, как альтернативный вариант, если мои не подойдут...

@thefair · 02.02.2016, 21:28 **[ТС]**

newJS, та я и не против js использовать, только опыты работы с ним КРАЙНЕ мало. Если бы были примеры воспользовался бы...

@newJS · 03.02.2016, 10:41

один из вариантов

CSS

#sixBut {position:relative; background:url("q2.png"); width:144px; height:97px;}
#sixBut {text-align:center; line-height:97px;}
/* бордюр для тупого амерекосского осла */
#sixBut img {position:absolute; left:0; top:0; border:0;}

HTML5

<div id="sixBut">Страна
<img src="q1.png" alt="" usemap="#example1">
</div>
 
<map name="example1" id="example1">
<area href="#" alt="" title="" id="sixButArea" shape="poly" coords="0,24,71,0,73,0,143,24,143,72,73,96,71,96,0,72,0,24">
</map>

Javascript

(function(){
var el;
 
onload=function(){
el=document.getElementById("sixButArea");
el.onmouseover=over;
el.onmouseout=out;
el=document.getElementById("sixBut").style;
 };
 
function over(){
el.background="url('q1.png')";
 };
 
function out(){
el.background="url('q2.png')";
 };
 
 })();

q1 - полностью прозрачная картинка, только рамка, на нё карта вешается
q2 - это с нужным фоном

и не забудь, бордюр можно и покрасивше нарисовать, png позволяет

@Fedor92 · 03.02.2016, 14:01

До кучи... Самый простой вариант...

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nowrap</title>
    <style>
        html,body{width:100%; height:100%; margin:0}
        a{display:table-cell; text-align:center; vertical-align:middle; text-decoration:none; font:bold 16px/1.25 Tahoma; width:144px; height:97px; background:url(bg.png) no-repeat}
        a:hover{width:144px; height:97px; background:url(hover.png) no-repeat}
    </style>
</head>
<body>
<a href="">Страна</a>
</body>
</html>

Фоны

Название: bg.png
Просмотров: 76

Размер: 892 байт

Название: hover.png
Просмотров: 78

Размер: 14.7 Кб

@andrey7287 · 03.02.2016, 16:32

Вышло немного кривовато, зато на чистом css ))).
http://codepen.io/Andrey7287/pen/OMoVpP

@newJS · 04.02.2016, 06:18

Fedor92, дык прямоугольная она получается.

andrey7287, по правилам код нужно выкладывать на форум, а ссылки это уже довесок.

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	02.02.2016, 06:52	13
	Сообщение от Cdelphi78 а что есть такой тег map? Здрасте, картина Репина, "Пушной зверёк в гостях" Сообщение от thefair на сколько я понимаю ховер карте без js не прикрутишь картинка даст больше художественных возможностей. А про JS нытьё только и слышно, а любой сайт посмотри, там сотни кил библиотек прикручено. P.S. А те кого он выключен, так они в курсе.. 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
		1
	Шестиугольная кнопка / элемент 31.01.2016, 19:23. Показов 4353. Ответов 33 Метки нет (Все метки) всем добра, подскажите пожалуйста, как реализовать шестиугольную (не равнобедренную) кнопку или элемент чтобы при наведении (на шестиугольную область, а не прямоугольную) менялся цвет внутри шестиугольника. и чтобы внутри была возможность поместить текст. пример: hover, focus: 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	31.01.2016, 23:19 [ТС]	2
	Можно и с использованием js или любыми способами 0

@Fedor92 2964 / 2593 / 1068 Регистрация: 15.12.2012 Сообщений: 9,830 Записей в блоге: 11
	31.01.2016, 23:31	3
	thefair, могу подкинуть код равнобедренного без границ... 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	01.02.2016, 06:39	4
	Можно карты использовать, тогда может быть и без js обойдётся. вот похожее Дизайнерское меню 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	01.02.2016, 15:01 [ТС]	5
	newJS, на сколько я понимаю ховер карте без js не прикрутишь и как бы реализовать надпись, именно текстовую посреди картинки? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,413
	01.02.2016, 15:12	6
	Fedor92, мне подкинете? newJS, а что есть такой тег map? 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	01.02.2016, 15:12 [ТС]	7
	Fedor92, можно, хоть на равнобедренный посмотрю 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,413
	01.02.2016, 15:51	9
	Fedor92, а вон оно что, спасибо.) 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	01.02.2016, 15:56 [ТС]	10
	Fedor92, интересный вариант, спасибо. но на сколько я понял чтобы весь шестиугольник стал ссылкой, блок <a /> тоже нужно шестигранить? и сделать его НЕ равнобедренным или с бордером стилями не получится, правильно? 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	01.02.2016, 20:39 [ТС]	12
	Fedor92, либо сделать svg... смотрел я в сторону svg, но так и не понял как там реализовать текст внутри картинки и как сделать ховер. + можно ли этот элемент засунуть в label. Если есть какой-то пример, тобуду очень признателен 0

@Protos73 7 / 6 / 7 Регистрация: 10.08.2015 Сообщений: 63
	02.02.2016, 09:57	14
	del 0

@Fedor92 2964 / 2593 / 1068 Регистрация: 15.12.2012 Сообщений: 9,830 Записей в блоге: 11
	02.02.2016, 11:03	15
	Сообщение от thefair Если есть какой-то пример, тобуду очень признателен Опытных примеров, к сожалению нет, только теория... Предлагаю, как альтернативный вариант, если мои не подойдут... 0

@thefair 2 / 2 / 0 Регистрация: 15.05.2011 Сообщений: 50
	02.02.2016, 21:28 [ТС]	16
	newJS, та я и не против js использовать, только опыты работы с ним КРАЙНЕ мало. Если бы были примеры воспользовался бы... 0

@andrey7287 30 / 28 / 14 Регистрация: 06.01.2016 Сообщений: 161
	03.02.2016, 16:32	19
	Вышло немного кривовато, зато на чистом css ))). http://codepen.io/Andrey7287/pen/OMoVpP 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	04.02.2016, 06:18	20
	Fedor92, дык прямоугольная она получается. andrey7287, по правилам код нужно выкладывать на форум, а ссылки это уже довесок. 0

Шестиугольная кнопка / элемент

Решение