0

введите сюда описание изображения

Как сделать такой 6-угольник с бордером и ховер эффектом?

3
  • 1
    Откройте сайт в браузере, вызовите магическими пасами инструмент разработчика и спокойно изучайте фигуры
    – Sergey
    22 ноя 2016 в 15:29
  • Проще всего взять две картинки и меня их по псевдоклассу :hover Однако, если Вы не ищете легких путей, можете пойти покодить что-то ужасное: вроде этого Ну и немного en:so примеров
    – Alex Krass
    22 ноя 2016 в 15:30
  • ищите codepen.io/search/… - hexagon, примеров уйма!
    – SVE
    22 ноя 2016 в 16:01

2 ответа 2

2

.wrap {
  height: 100vh;
  background: #fff;
}

/* Base hex */
.hx {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.hexagon {
	width: 110px;
	height: 62px;
	background: #fe635e;
	position: absolute;
  z-index: 10;
  cursor: pointer;
}
.hexagon:before,
.hexagon:after {
  content: "";
	position: absolute;
  left: 0;
	width: 0;
	height: 0;
}

.hexagon:before {	
	top: -27px; 	
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-bottom: 28px solid #fe635e;
}
.hexagon:after {
	bottom: -27px; 
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 28px solid #fe635e;
}

/* hex Border */
.hexagon.border {
  width: 120px;
	height: 70px;
  background: #fc8582;
  z-index: 2;
}
.hexagon.border:before {
	top: -30px; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 30px solid #fc8582;
}
.hexagon.border:after {
	bottom: -30px; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 30px solid #fc8582;
}

/* Icon */
.base span {
  display: block;
  text-align: center;
  font-weight: bolder;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 3.5rem;
  position: relative;
  color: #fff;
  
  -webkit-transition: all .2s ease-in-out;
  
  transition: all .2s ease-in-out;
}

/* Hover */
.active .base span,
.base:hover span {
  color: #fa6358;
}


.active .base,
.base:hover {
  background: #fff;
}

.active .base:before,
.base:hover:before {	
	top: -27px; 	
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-bottom: 28px solid #fff;
}
.active .base:after,
.base:hover:after {
	bottom: -27px; 
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 28px solid #fff;
}

.active .hexagon.border,
.base:hover~.hexagon.border {
  background: #ff625d;
}
.active .hexagon.border:before,
.base:hover~.hexagon.border:before {
	top: -30px; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 30px solid #ff625d;
}
.active .hexagon.border:after,
.base:hover~.hexagon.border:after {
	bottom: -30px; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 30px solid #ff625d;
}



/* Add other style */
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.hx-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 5rem auto;
  width: 100%;
}
.hx-item {
  text-align: center;
  width: 25%;
}
.hx-title {
  color: #888;
  text-transform: uppercase;
  font-weight: normal;
}

@media screen and (min-width: 500px){
  .hx-list {
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="wrap">
  <ul class="hx-list">
    <li class="hx-item">
      <div class="hx">
        <div class="hexagon base">
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span>
        </div>
        <!-- <div class="hexagon shadow"></div> -->
        <div class="hexagon border"></div>
      </div>

      <h3 class="hx-title">
        clients
      </h3>
    </li>
    
    <li class="hx-item active">
      <div class="hx">
        <div class="hexagon base">
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span>
        </div>
        <!-- <div class="hexagon shadow"></div> -->
        <div class="hexagon border"></div>
      </div>

      <h3 class="hx-title">
        clients
      </h3>
    </li>
    
    <li class="hx-item">
      <div class="hx">
        <div class="hexagon base">
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span>
        </div>
        <!-- <div class="hexagon shadow"></div> -->
        <div class="hexagon border"></div>
      </div>

      <h3 class="hx-title">
        clients
      </h3>
    </li>
    
    <li class="hx-item">
      <div class="hx">
        <div class="hexagon base">
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span>
        </div>
        <!-- <div class="hexagon shadow"></div> -->
        <div class="hexagon border"></div>
      </div>

      <h3 class="hx-title">
        clients
      </h3>
    </li>
  </ul>
</div>

Пример на CODEPEN

Есть разные реализации Hexagon. Один из вариантов, если с border - 2 подобные фигуры, наложенные друг на друга.

1
  • Спасибо, очень помог!
    – Admiral
    22 ноя 2016 в 17:58
2

Один из вариантов ссылка :

* {
  padding: 0;
  margin: 0;
}
#hexagon {
  top: 50px;
  left: 150px;
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#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;
}
#inner {
  top: 3px;
  left: 159px;
  width: 83px;
  height: 39px;
  background: green;
  position: relative;
}
#inner:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 25px solid green;
}
#inner:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 25px solid green;
}
#x:hover {
  opacity: 0.1;
}
<div id="x">
  <div id="hexagon"></div>
  <div id="inner"></div>
</div>

2
  • Сделать фигуру и ховер легко, а вот как сделать такой бордер в такой фигуре ????
    – Admiral
    22 ноя 2016 в 15:51
  • @Admiral изменил. можно так, только надо поиграться с размерами...
    – C.Raf.T
    22 ноя 2016 в 16:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.