Html / css: how to create a hexagonal placeholder image
This is (almost) what I want to create:
Html
<div class="hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2">
</div>
</div>
</div>
CSS
.hexagon1 {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://placekitten.com/240/240);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
The problem is that I need a border on a hexagon, and if possible, I would like to place the image inside an img tag. I tried to add a border to the div, but I only got the top and bottom border of the hexagon due to hidden visibility or hidden from attribute overflow.
This is what I have found so far while searching:
https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3
https://github.com/web-tiki/responsive-grid-of-hexagons
I also found some questions regarding this question here on Stackoverflow, but none of them explained exactly how you could create a hexagon. Also the hexagons in the examples are all on the edge, which I don't want (as shown in the code). I only need one hexagon, not a grid.
When I tried to change the styles of the examples, it always ended in catastrophic chaos. This is why I would like to know how to create and calculate divs that are used to create a hexagon with a border and inside.
What speed is width at height?
How do I create a border with the same width on each side?
Where can I place an image as a background image?
How big should the picture be (as a percentage of the div)?
What transformations do you really need to create a hexagon? (I saw an example that used scale, rotated and translated to get the image inside)
How can the rotation be calculated?
How to calculate the required stock?
As I understand it, a newbie to web design can someone explain this as simply as possible? It would be enough if someone could show me, according to the example code above, how numbers are calculated. I know that the hexagon has an interior angle of 120 ° and that around it.
Thanks for your help pending. :)
EDIT
Another page I found about hexagons, but only to create a shape and not put an image in or around it:
source to share
Important note
Please be advised that this solution does not work for anyone looking to create something like this, supported by all browsers, as IE does not yet support the clip-path property used in this example!
I found a way to do it thanks to @SahilDhir, although this is a more workaround:
Html
<div class="poligon">
<img src="http://lorempixel.com/g/600/400/">
</div>
CSS
.poligon {
display: inline-block;
position: relative;
width: 200px;
height: 180px;
background: red;
box-sizing: border-box;
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
.poligon img {
position: absolute;
top: 2px; /* equal to border thickness */
left: 2px; /* equal to border thickness */
width: 196px; /* container height - (border thickness * 2) */
height: 176px; /* container height - (border thickness * 2) */
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
Note that I didn't calculate much here, but tried to achieve a hexagonal shape.
I will have the problem that my photo will have a transparent background, but I thought I could create a linear gradient to fill the background polygon. I'll have to try this first though ^^
I will not mark this as the final answer as my questions have not yet been answered. I still want to be able to create a hexagon like the one shown in the example above, where I could adapt the heights and widths as well as the border thickness as I want.
EDIT
Since I haven't found a better solution, I improved it here and figured out the calculations needed:
Html
<div class="poligon">
<div class="hex-background">
<img src="https://img.clipartfest.com/953d8641fe933437bbc41d48e6fc8492_yellow20stars20clipart-christmas-stars-clipart-without-background_532-506.png">
</div>
</div>
CSS
.poligon {
display: inline-block;
position: relative;
width: 120px;
height: 103.92px; /* width * 0.866 */
background: red;
box-sizing: border-box;
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
.hex-background {
position: absolute;
background-color: white;
top: 2px; /* equal to border thickness */
left: 2px; /* equal to border thickness */
width: 116px; /* container width - (border thickness * 2) */
height: 99.92px; /* container height - (border thickness * 2) */
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
.poligon img {
position: absolute;
width: 116px; /* container width - (border thickness * 2) */
height: 99.92px; /* container height - (border thickness * 2) */
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
A portion of the clip is correct if you want to use a one-sided hexagon.
From the image above, you can see how I found these numbers;) If you have any further questions about this, feel free to ask. I will try to explain this as best I can.
source to share
I refer you to SVG approach
in order to create this shape. It is very simple, and if you are considering a flexible web page structure, it can be easily achieved.
The reason for this approach is
1. You don't need to write a lot of css.
2. Inline SVG is a modern web approach.
3. Scalability and durability. 4. Responsive
The polygon
c tag svg
makes the shape you want, and with css
we can target what we want to achieve, for example border
in this case. Image
was linked with help pattern
.
Below is a snippet with an example of what you need.
svg {
width: 30%;
margin: 0 auto;
}
#hex {
stroke-width: 2;
stroke: red;
}
<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://dummyimage.com/600x400/red/fff" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
</pattern>
</defs>
<polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
</svg>
source to share
I need something like this and the easiest way to do this is with two hexagons, one on top of the other.
Using the shapes provided by CSS Shapes :
#hexagon1 {
width: 100px;
height: 55px;
background: red;
position: absolute;
z-index: 2;
}
#hexagon1: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;
}
#hexagon1: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;
}
#hexagon2 {
width: 101px;
height: 56px;
background: black;
position: relative;
z-index: 1;
}
#hexagon2:before {
content: "";
position: absolute;
top: -26px;
left: 0;
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-bottom: 26px solid black;
}
#hexagon2:after {
content: "";
position: absolute;
bottom: -26px;
left: 0;
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-top: 26px solid black;
}
Here's the Codepen I made for you: http://codepen.io/vogelbeere/pen/peYjNe
source to share