All geek questions in one place

How can you join CSS hexagon elements in a custom layout?

This is the layout I am looking for to achieve:

I created a hexagon with this css:

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
  display:inline-block;
  margin:0.2em;
}
.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;
}

However, I am looking to learn how to fill them with an image. Here is the pen: https://codepen.io/1istbesser/pen/ddypXK

How to place images inside a hexagon so that it covers all this? If I use the background image on # hexagon1, the image only covers the middle part.

+4
source share
4 answers

The problem you will encounter is that using CSS triangles to create a hexagon actually gives you square squares with one or two borders filled (and the rest are transparent). This has two effects:

  • , .
  • - : , , .

-, . SVG - - - clip-path CSS, , SVG. :

<svg class="svg-graphic" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
       <clipPath id="hexagonal-mask">
          <polygon points="300,150 225,280 75,280 0,150 75,20 225,20" />
       </clipPath>
    </defs> 
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>
Hide result

, :

.svg-template {
  position: absolute;
}

.honeycomb {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 1200px;
  height: 1200px;
  border: 1px solid #DDD;
}

.honeycomb li {
 margin: 0;
 padding: 0;
 position: absolute;
}

.honeycomb li:nth-child(1) {
  top: 0;
  left: 0;
}

.honeycomb li:nth-child(2) {
  top: 0;
  left: 290px;
}

.honeycomb li:nth-child(3) {
  top: 0;
  left: 580px;
}

.honeycomb li:nth-child(4) {
  top: 240px;
  left: 145px;
}

.honeycomb li:nth-child(5) {
  top: 240px;
  left: 435px;
}

.honeycomb li:nth-child(6) {
  top: 240px;
  left: 725px;
}

.honeycomb li a {
  cursor: pointer;
}

.honeycomb li a:hover image{
 opacity: 0.5;
}
<svg class="svg-template" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
   <defs>
      <clipPath id="hexagonal-mask">
         <polygon points="50 0, 95 25, 95 75, 50 100, 5 75, 5 25" />
      </clipPath>
    </defs>
</svg>

<ul class="honeycomb">
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
  <li>
     <svg width="300" height="300" viewBox="0 0 100 100" >
      <a href="#something">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
       </a>
    </svg>
  </li>
</ul>
Hide result
+1

, . , , .

, clip-path:

* {
  background-color: black;
}

section {
  margin-top: 3em;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.hexagon {
  width: 100px;
  height: 100px;
  background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
  position: relative;
  display: inline-block;
  margin: -10px 0.2em;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<section>
  <div class="row">
    <div class="hexagon" id="hexagon1"></div>
    <div class="hexagon" id="hexagon2"></div>
    <div class="hexagon" id="hexagon3"></div>
    <div class="hexagon" id="hexagon4"></div>
  </div>
  <div class="row">
    <div class="hexagon" id="hexagon5"></div>
    <div class="hexagon" id="hexagon6"></div>
    <div class="hexagon" id="hexagon7"></div>
    <div class="hexagon" id="hexagon8"></div>
    <div class="hexagon" id="hexagon9"></div>
  </div>

</section>
Hide result
+1

, SVG mask css

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

*{
  background-color:black;
}
section{
  margin-top:3em;
  display:flex;
  flex-flow: column;
  align-items: center;
}
.hexagon {
	width: 100px;
	height: 110px;
	background: red;
	position: relative;
  display:inline-block;
  margin:0.2em;
  -webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
  mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
  background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
  background-size: cover;
  background-position: center;
}
.row{
  text-align: center;
  margin-top: -25px
}
<section>
      <div class="row">
      <div class="hexagon" id="hexagon1"></div>
      <div class="hexagon" id="hexagon2"></div>
      <div class="hexagon" id="hexagon3"></div>
      <div class="hexagon" id="hexagon4"></div>
      <div class="row">
      <div class="hexagon" id="hexagon5"></div>
      <div class="hexagon" id="hexagon6"></div>
      <div class="hexagon" id="hexagon7"></div>
      </div>
      <div class="row">
      <div class="hexagon" id="hexagon8"></div>
      <div class="hexagon" id="hexagon9"></div>
      </div>
 </section>
Hide result
+1

Codepen

, , , , ,

CSS

*{
  background-color:black;
}
section{
  margin-top:3em;
  display:flex;
  flex-flow: column;
  align-items: center;
}
.hexagon {
    width: 100px;
    height: 110px;
    background: red;
    position: relative;
  display:inline-block;
  margin:0.2em;
  overflow: hidden;
}
.hexagon img{
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-right: 50px solid black;
    border-left: 50px solid black;
    border-bottom: 25px solid transparent;
  z-index: 2;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-right: 50px solid black;
    border-left: 50px solid black;
    border-top: 25px solid transparent;
  z-index: 2;
}
.row{
margin-top:1.3em;
}
.hexagon#hexagon2{
  background-color: purple;
}
.hexagon#hexagon2:before{
  border-bottom-color: purple;
}
.hexagon#hexagon2:after{
  border-top-color: purple;
}
.hexagon#hexagon3{
  background-color: white;
}
.hexagon#hexagon3:before{
  border-bottom-color: white;
}
.hexagon#hexagon3:after{
  border-top-color: white;
}
.hexagon#hexagon4{
  background-color: orange;
}
.hexagon#hexagon4:before{
  border-bottom-color: orange;
}
.hexagon#hexagon4:after{
  border-top-color: orange;
}
0
source

Source: https://habr.com/ru/post/1692874/

More articles:


All Articles