enter image description here

How to make such a 6-gon with a border and hover effect?

  • Open the site in the browser, call the developer tool with magical passes and calmly study the figures - Sergey
  • The easiest thing is to take two pictures and me in a pseudo-class :hover However, if you are not looking for easy ways, you can go look for something terrible: like this. And a little en: so examples - Alex Krass
  • look for codepen.io/search/… - hexagon, lots of examples! - HamSter

2 answers 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 example

There are different implementations of Hexagon . One of the options if with a border - 2 similar figures superimposed on each other.

  • Thank you very much! - Admiral

One of the options link :

 * { 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>

  • It is easy to make a figure and hover, but how to make such a border in such a figure ???? - Admiral
  • @Admiral changed. it is possible, only it is necessary to play with the size ... - C.Raf.T