Why are pseudo elements not appearing on divs? - html
I've added after pseudo element to divs, but from debugger view no pseudo elements are attached.
There are related posts, but I still cannot figure out why.
Any comments are appreciated.
Operations happen here:
.col > div:nth-child(1) {
background:url("http://gdurl.com/hZIP");
background-size:cover;
}
.col > div:nth-child(1):after{
position:absolute;
top:0; left:0;
width:100%;height:100%;
background-color:black;
}
demo,
https://jsfiddle.net/Debra321/432574uc/62/
html {
box-sizing: border-box;
}
body {
background: #fcfca4;
background: linear-gradient(to top right, #F3E9D2, #EC9192);
background-repeat: no-repeat;
background-attachment: fixed;
}
#phoneContent {
position: absolute;
top: 17.7%;
left: 50px;
width: 253px;
height: 455px;
display: block;
margin: auto;
overflow: auto;
}
#phoneContent .col {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.col>div {
flex: 1;
display: flex;
flex-direction: column;
}
.col>div:nth-child(1) {
background: url("http://gdurl.com/hZIP");
background-size: cover;
//filter: brightness(50%);
}
.col>div:nth-child(1):after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
//opacity:0;
//transition: opacity 0.5s;
//background:rgba(0,0,0,0.6);
}
.col>div:nth-child(1) :hover:after {
opacity: 1;
}
.col>div:nth-child(2) {
background-color: red;
}
.col>div:nth-child(3) {
background-color: blue;
}
.col>div:nth-child(4) {
background-color: red;
}
.st0 {
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #DBDDDD;
stroke-miterlimit: 10;
}
.st2 {
fill: #FFFFFF;
}
.st3 {
fill: none;
stroke: #E5E5E5;
stroke-miterlimit: 10;
}
.st4 {
opacity: 0.3;
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
#myPhone {
position: relative;
width: 350px;
height: 700px;
display: block;
margin: auto;
}
Apply local draft version or discard it
<body>
<div id="myPhone">
<div id="phonediv">
<svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 500" style="enable-background:new 0 0 250 500;" xml:space="preserve">
<g>
<path class="st0" d="M21,104.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V104.5z"/>
<path class="st0" d="M21,143.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V143.5z"/>
<path class="st0" d="M21,182.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V182.5z"/>
</g>
<path class="st0" d="M200.5,23.3H53.7c-22.6,0-35.1,15.2-35.1,34.4v387.9c0,21.4,16.6,35.1,35.1,35.1h146.8
c19.7,0,34.4-15.9,34.4-35.1V57.7C234.9,38.5,221.9,23.3,200.5,23.3z M217.6,414.6H35.1V87.2h182.5V414.6z"/>
<path class="st0" d="M200.5,476.2H53.7c-14.7,0-30.6-11.7-30.6-30.6V57.7c0-17,13.2-29.9,30.6-29.9h146.8
c16.7,0,29.9,13.1,29.9,29.9v387.9C230.4,461.6,216.1,476.2,200.5,476.2z M53.7,28.6c-17,0-29.9,12.5-29.9,29.1v387.9
c0,20.4,17.8,29.9,29.9,29.9h146.8c15.2,0,29.1-14.2,29.1-29.9V57.7c0-16.3-12.8-29.1-29.1-29.1H53.7z"/>
<circle class="st1" cx="127.1" cy="445.2" r="19.9"/>
<g>
<path class="st2" d="M127.1,427.1c10.4,0,18.9,8.5,18.9,18.9c0,10.4-8.5,18.9-18.9,18.9c-10.4,0-18.9-8.5-18.9-18.9
C108.2,435.6,116.7,427.1,127.1,427.1 M127.1,426.1c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9
C147,435,138.1,426.1,127.1,426.1L127.1,426.1z"/>
</g>
<path class="st3" d="M131.2,453.6h-9c-1.7,0-3-1.4-3-3v-9c0-1.7,1.4-3,3-3h9c1.7,0,3,1.4,3,3v9C134.2,452.3,132.9,453.6,131.2,453.6
z M122.2,439.4c-1.2,0-2.3,1-2.3,2.3v9c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.3-1,2.3-2.3v-9c0-1.2-1-2.3-2.3-2.3H122.2z"/>
<path class="st0" d="M146,50.5c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5h35
C144.9,48,146,49.1,146,50.5L146,50.5z"/>
<line class="st4" x1="34.5" y1="87" x2="217" y2="87"/>
</svg>
</div>
<div id="phoneContent">
<div class="col">
<div>
</div>
<div>
<h1>
TWO
</h1>
</div>
<div>
<h1>
THREE
</h1>
</div>
<div>
<h1>
FOUR
</h1>
</div>
</div>
</div>
</div>
</body>
Keep in mind that ::after and ::before pseudo-elements must always have the content property, even if the property is empty (content: "").
.col > div:nth-child(1) {
background: url("http://gdurl.com/hZIP");
background-size: cover;
filter: brightness(50%);
position: relative; /* establish nearest positioned ancestor for absolute positioning */
}
.col > div:nth-child(1):hover::after {
content: ""; /* necessary for pseudo-elements to work */
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer; /* optional */
}
revised fiddle
Related
VSCode selecting SCSS class does not work
Hello I have a problem with SCSS when I want to choose class with double ' - ' it does not work. Sidebar class has an orange class but --active is red. If i use only one '-' it is ok. Anyone knows why?
.sidebar {
position: absolute;
top: -10;
left: 0;
height: 70vh;
max-width: 10vh;
background-color: white;
&--active {
margin: 10rem;
}
&--icon {
width: 3rem;
}
HTML:
<div class="sidebar">
<svg class="sidebar--icon"><use href="{% static 'home/sprite.svg' %}#icon-user"></use></svg>
<svg class="sidebar--icon"><use href="{% static 'home/sprite.svg' %}#icon-menu"></use></svg>
</div>
You can use this link for reference- SCSS documentation. Both .sidebar-icon or .sidebar--icon classes are fine and will work.
The :active pseudo-selector is a CSS property and to use it the convention will be &:active which in CSS translates to .sidebar:active. If you want to use :active on the sidebar--icon, then you have to apply &:active to the inner nested child.
Please check this example with sample circle icons:
<div class="sidebar">
<svg class="sidebar--icon" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
</svg>
<svg class="sidebar--icon" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
</svg>
</div>
CSS:
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 50vh;
max-width: 10vh;
background-color: white;
&:hover {
margin: 1rem;
background-color:orange;
}
&--icon {
width: 20rem;
margin-right: 2px;
&:hover{
width: 15rem;
}
&:active{
border: 1px solid blue;
}
}
}
SVG fill transparent
I'm trying to use wave SVG and I have a background image at the body
but I want the SVG to be filled with transparent so it shows the body background-image
but when I try to make it fill: transparent or fill-opacity: 0
it just hides all the wave shapes. So is there is a way to replace #000000 with something transparent that shows body background-image?
Here is an example code
https://jsfiddle.net/nLt2vu4k/
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
</body>
</html>
Thank you for helping,
Best regards.
For transparent you can define "fill-opacity" to 0 in path: <html> <body> <header> <div class="shape"> <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill-opacity="0"></path> </svg> </div> </header> </body> </html>
You can use clipPath with your svg
To have a nice result you might have to edit your SVG
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
clip-path: url(#myClip);
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<clipPath id="myClip">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</clipPath>
</svg>
</div>
</header>
</body>
</html>
Try creating a new svg to cover the header background, and remove the header background-color.
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
position: relative;
}
.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}
<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>
</div>
</header>
https://jsfiddle.net/afelixj/7z1L5xdo/3/
fixed div wrapper on bottom right with a circlecss animation and text centered inside
I have a circle animation with a centered text inside.
Everything is wrapped into a div.
I'm trying to put this wrapper div on the bottom right of the page.
Any tips about how to archive this without let centered text going outside the circle?
here the code example https://codepen.io/D_s/pen/oNzQdJy
thank you!
html,
body {
height: 100%;
background: lightgrey;
}
.wrapper {
max-width: 50px;
max-height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.centered {
position: absolute;
color: white;
font: 3vw/3vw times;
height: 50px;
text-align: center;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
position: absolute;
top: calc(50% - 15vw);
left: calc(50% - 15vw);
overflow: hidden;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%" >SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
update the code like below:
.wrapper {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font: 3vw/3vw times;
margin: 0;
}
body {
background:grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"></path>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%">SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
Different behavior of SVG image in Chrome and IE 11
I have an svg image and I am using flex to center the svg image inside div. svg image is getting properly centered in Chrome, but if I am trying to use the same behavior in IE 11, svg image is getting completely expanded and it covers the entire div.
jsbin link: https://jsbin.com/qufuqekera/1/edit?html,css,output
.svgImage {
width: auto;
display: flex;
align-items: center;
height: 100%;
padding-left: 10px;
padding-right: 10px;
}
svg {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
border: 1px solid red;
background-color: yellow;
}
.defaultSize {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid black;
padding-top: 18px;
padding-bottom: 18px;
}
.scroll-bar {
overflow: auto;
position: absolute;
width: 100%;
}
.container {
height: 60vh;
position: relative
}
<div class="container">
<div class="defaultSize">
<div class="scroll-bar" style="height: calc(100% - 36px)">
<div class="svgImage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1575.01 278.01">
<defs>
<style>.cls-1,.cls-3{fill:#009a38;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:1.01px;}.cls-2{font-size:7px;fill:#f2f2f2;font-family:SiemensSans-Roman, Siemens Sans;}.cls-3{stroke-width:0.99px;}.cls-4{fill:#c8c8c8;}</style>
</defs>
<title>SVG Image</title>
<g id="Layer_2" data-name="Layer 2">
<g id="svgImage" data-name="SVG Image">
<g id="Auto_SVGImage" data-name="Auto_SVGImage">
<g id="Right_Image" data-name="Right Image">
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
Screenshot of output in Chrome displaying as expected: https://i.stack.imgur.com/COSm1.png
Screenshot of output in IE 11: https://i.stack.imgur.com/CWxo9.png
How can you join CSS hexagon elements in a custom layout?
This is the layout I'm looking to achieve:
I've created the 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'm looking to find out how to fill them with an image.
Here is a pen:https://codepen.io/1istbesser/pen/ddypXK
How do I put images inside the hexagon so that it covers all of it? If I use background-image on #hexagon1, the image only covers the middle part.
The problem you're going to run into is that using CSS triangles to create a hexagon actually yields square boxes with one or two borders filled in (and the rest transparent). This has two effects:
You can't easily put an image into the filled border so that it's clipped.
You can't make the hexagon - and only the hexagon - clickable: the whole set of rectangles will always be clickable, which will make your layout tricky where they overlap.
You're going to need something that can produce an actual hexagon. Inline SVG with a clip-path is a good fit - unlike clip-path in CSS, it's supported pretty much wherever SVG is. Here's an example:
<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>
Here's a more detailed example showing clickable hexagons, and re-use of the clip path definition:
.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>
You need to consider another way if you want to use image as background. You are relying on pseudo element so your hexagone is not one element and thus you cannot use background image to cover the whole area.
Here is an idea using 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>
What you could do is draw an SVG and than put the image as mask in 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>
I made this code
Codepen
I changed the way you draw the element, instead adding the border top with the color red, I added the sides with a background, but you'd need to know the background-color of the page to do that, so I put the image above the box and the before and after above the image
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;
}