Шестиугольную рамка

#html #css #bootstrap

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


    

Ответы

Ответ 1

Вариантов существует предостаточно. Итак : 


Создайте картинку с рамкой и картинку без. При наведении замените картинку (Плюсы
- простой код. Минусы — не удобно, когда множество картинок).
Реализация через transform: scale(N).(Плюсы — сработает для всего. Минусы — при увеличении
видна кривизна и неправильность формы). Фиддлы : вот и вот.
Реализация обычной рамки. Несомненно, самый простой, однотипный, и без заморочек
способ) (Плюсы — быстрая, простая реализация. Минусы — Опять же, при увеличении будут
некоторое время видны составляющие элементы). Фиддл здесь.
SVG. Очень хороший способ, но, возможно, в данной ситуации излишне будет его здесь
использовать.(Плюсы - кроссбраузерность, любые задачи, при зуме будет оставаться тем
же изображением. Минусы - нету). Документация здесь(Мозилла), здесь(Хабрахабр) и вот
здесь (Тут английский, за надобностью можно перевести). Пример для SVG(CodePen).




body {
  font-family: "PT Sans", "Arial", sans-serif;
}

.hex {
  cursor: pointer;
  fill-opacity: 0.4;
  stroke: #000;
  stroke-width: 1;
}

.hex:hover {
  fill-opacity: 1;
  stroke: #ff0000;
  stroke-width: 5;
}

.hex {
  transition: transform, fill-opacity, stroke-width;
  -webkit-transition: transform, fill-opacity, stroke-width;
  transition-duration: 1s;
  -webkit-transition-duration: 1s;
}
Image Fill







Наконец 5-ый, и последний способ. Clip-Path. Также является одним из свойств SVG,
но, всё-таки, является отдельным компонентом этой картины.(Огромный плюс — вы можете
не напрягаясь "вырезать" из картинки любую форму. Минус — достаточно кропотливая работа,
не все браузеры поддерживают это свойство.). Документация тут (На английском), примеры
тут, и Фиддл вот тут.




И похожий вопрос : ссылка.


Ответ 2

На англ. шестиугольник будет hexagon. Если искать по этому названию, то можно получить
нечто вот такое:  



body {
  background: #fff
}
.rhex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  opacity: .25;
  background: orange;
  transition: opacity .5s;
  cursor: pointer;
}
.rhex:before, .rhex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.rhex:before {
  transform: rotate(60deg);
}
.rhex:after {
  transform: rotate(-60deg);
}
.rhex:hover {
  opacity: 1;
}



Ответ 3

Предлагаю использовать border-image.

Шестиугольный фон должен занимать всю область блока вместе с границами, а через border-image
поверх накладывается шестиугольная рамка (остальная часть прозрачна).

Для IE придётся дополнительно прописать border-color: transparent.