Pierre
Reputation: 155
Trying to align svg image hexagons via html and css
I am trying to achieve something like this:
https://i.sstatic.net/VmkfS.png
I need the hexagons to remain external images because I want to customize them a lot.
I need to make something that will work no matter the number of hex on a line and no matter the number of lines.
I have tried this:
.line {
height: 43px;
}
.line.evenLine {
left: 18px;
position: relative;
top: -10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
<div id="body">
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line evenLine">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line evenLine">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<p>End</p>
</div>
</body>
</html>As you can see in the CSS, I tried to put the even lines 10 pixels higher so that the hex can overlap each other. However it's not enough. I need the second line to be -10px, the third line to be -20px, the fourth line to be -30px, etc. I can do it easily in JS. But I would like something more neat.
Any idea?
Upvotes: 1
Views: 48
Answers (1)
Rachel Gallen
Reputation: 28563
If you change top to margin-top , and add a margin-bottom of -10px, this will off-set the negative margin-top, and your hexagonal lines will fit snugly together.. see snippet.
.line {
height: 43px;
}
.line.evenLine {
left: 18px;
position: relative;
margin-top: -10px;
margin-bottom:-10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
<div id="body">
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line evenLine">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line evenLine">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<div class="line">
<svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg><svg width="36" height="43" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 18,0 36,10 36,33 18,43 0,33"
stroke="black" fill="red" stroke-width="1"/>
</svg>
</div>
<p>End</p>
</div>
</body>
</html>Upvotes: 1
Related Questions
- Creating a row of hexagons using pure CSS
- How to align an svg properly?
- html/css hexagon with image inside
- Aligning custom LI SVG images
- svg rotate hexagon pattern - hexagon point to top
- hexagons with image inside
- CSS Hexagon with elements inside
- properly align svg polygon
- Images inside of css-based hexagons
- Creating Hexagons in css / html