Hexagonal border with embedded image

I'm striving to achieve the image below:

https://i.sstatic.net/iZIex.png

I've managed to create a hexagon border and text, but I'm unsure how to incorporate the hexagon image and create a grid of 3 hexagons.

Any assistance would be greatly appreciated. If there's a more elegant solution using clip-path or SVG, please share.

Here is the code I have:

HTML

<div class="container">
                        <div class="row">
                        <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety, Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross-platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety, Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross-platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety, Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross-platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                        </div>
            </div>

CSS

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #ffffff;
  margin: 57.74px 0;
  border-left: solid 2px #4850be;
  border-right: solid 2px #4850be;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 27.2893px;
}

.hexagon:before {
  top: -70.7107px;
  border-top: solid 2.8284px #4850be;
  border-right: solid 2.8284px #4850be;
}

.hexagon:after {
  bottom: -70.7107px;
  border-bottom: solid 2.8284px #4850be;
  border-left: solid 2.8284px #4850be;
}

cssclip-path

Answer №1

Essentially, I have approached it in a similar manner to how you have previously done it. You may want to consider a solution like the one provided below:

.hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #ffffff;
  margin: 57.74px 0;
  border-left: solid 2px #4850be;
  border-right: solid 2px #4850be;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 27.2893px;
  
  /* NEW */
  z-index:1;
}

.hexagon:before {
  top: -70.7107px;
  border-top: solid 2.8284px #4850be;
  border-right: solid 2.8284px #4850be;
}

.hexagon:after {
  bottom: -70.7107px;
  border-bottom: solid 2.8284px #4850be;
  border-left: solid 2.8284px #4850be;
}

/* NEW */
.icon-box {
  width: 70px;
  height: 30px;
  background-color: orange;
  position: absolute;
  top:-35px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}

.icon-box:before,
.icon-box:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 0;
  right: 0;
  margin: auto;
  background-color: orange;
  z-index:1;
}

.icon-box:before {
  top: -25px;
}

.icon-box:after {
  bottom: -25px;
}

.icon-box i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  z-index: 20;
  font-size: 50px;
  width: 40px;
  height: 40px;
  text-align: center;
  color: #fff;
}


/* JUST FOR DEMO PURPOSE */
.text {
  z-index: 10;
  position: relative;
  font-size: 7px;
  text-align: center;
  padding: 20px;
}

.text h3 {
  font-size: 8px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<div class="container">
                        <div class="row">
                        <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="icon-box"><i class="fa fa-user"></i></div>
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                            <div class="icon-box"><i class="fa fa-user"></i></div>
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                            <div class="icon-box"><i class="fa fa-user"></i></div>
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                        </div>
            </div>

(I included bootstrap and fontawesome for demonstrative purposes..)

Answer №2

I successfully resolved it by implementing a different approach:

#content-middle {
            position: relative;
            width: 100%;
            min-height: 100vh;
            margin: 0 auto;
            overflow: hidden;
        }
        
        #content-middle::before {
            top: 0;
            height: 100%;
            background: #f4f4f6;
            -webkit-clip-path: polygon(0 46%, 0% 100%, 54% 100%);
            clip-path: polygon(0 46%, 0% 100%, 54% 100%);
            z-index: -1;
        }
        
        #content-middle::before, #content::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
        }
 
        .hexWrapper {
            text-align: center;
            margin: 0px;
            position: relative;
            display: inline-block;
            width: 150px; /*Change this to resize*/
            height: 150px; /*Change this to resize*/
            min-width: 150px;
            min-height: 150px;
            float:left;
        }           
    
        .hexagon {
            height: calc(100%/1.732050807);
            width: 100%;
            background-color: #ffffff;
            display:inline-block;
        }

        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            background-color: inherit;
            height: inherit;
            width: inherit;
            left: -1px; right: -1px; top: 0; bottom: 0;
        }

        .hexagon:before {
            transform: rotateZ(60deg);
        }

        .hexagon:after {
            transform: rotateZ(120deg);
        }

        .hexagon,
        .hexagon:before,
        .hexagon:after {
            box-sizing: content-box;
            border: solid 2px #4850be;
            border-top-width: 0;
            border-bottom-width: 0;
            z-index: -1; /*We need to force the z-index so we can put some text over*/
        }

        #container{
            padding-top: 60px;
            width:100%;
            min-width:910px; /* so the page doesn't get too small. This should be done better with media queries*/
        }

        .row-hexagon{
            clear:both; /*to reset all the configs*/
            float:left;
            display: flex; /* using some flex to aline to center */
            justify-content: center;
            overflow:hidden; /*this is for after, when we add more hex's*/
            padding-top:145px; /* To take care of the top part of the hex, needs changing if we change the size on the wrapper*/
            position:relative; 
        }

        .fullWidth{
            width: 100%;
        }
 
 
        .icon-box{
            width: 75px;
            height:40px;
            background-color: #4850be;
            position: absolute;
            top:-25px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 10;
        }

        .icon-box:before,
        .icon-box:after{
            content: "";
            position: absolute;
            z-index: 1;
            width: 50px;
            height: 50px;
            -webkit-transform: scaleY(0.5774) rotate(-45deg);
            -ms-transform: scaleY(0.5774) rotate(-45deg);
            transform: scaleY(0.5774) rotate(-45deg);
            background-color: inherit;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #4850be;
            z-index:1;
        }

        .icon-box:before {
            top: -25px;
        }

        .icon-box:after {
            bottom: -25px;
        }

        .icon-box i,
        .icon-box img {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -20px;
            margin: 0 auto;
            z-index: 20;
            font-size: 90px;
            width: 80px;
            height: 80px;
            text-align: center;
            color: #fff;
        }

        .text {
            z-index: 10;
            position: relative;
            font-size: 17px;
            text-align: center;
            padding: 20px;
        }

        .text h3 {
            font-size: 1em;
            color:#42c9c0;
            font-weight:700;
        }
        
        .text h4{
            font-size: 0.8em;
            color:#42c9c0;
            font-weight:300;
        }
        
        .text p{
            font-size: 0.5em;
            font-weight:300;
            font-style:italic;
        }
<!-- Font Awesome for demo purposes here -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="content-middle">
                
                    <div id="container-hexagon">
                        <div class="row-hexagon fullWidth" id="firstRow">
                            <div class="hexWrapper">
                                <div class="hexagon">
                                    <div class="icon-box"><i class="fa fa-user"></i></div>
                                    <div class="text">
                                    <h3>Title</h3>
                                    <h4>Subtitle </h4>
                                    <p>Text</p>
                                </div>
                            </div>
                        </div>
                            <div class="hexWrapper">
                                <div class="hexagon">
                                    <div class="icon-box"><i class="fa fa-user"></i></div>
                                    <div class="text">
                                    <h3>Title</h3>
                                    <h4>Subtitle </h4>
                                    <p>Text</p>
                                </div>
                            </div>
                        </div>
                            <div class="hexWrapper">
                                <div class="hexagon">
                                    <div class="icon-box"><i class="fa fa-user"></i></div>
                                    <div class="text">
                                    <h3>Title</h3>
                                    <h4>Subtitle </h4>
                                    <p>Text</p>
                                </div>
                            </div>
                        </div>
                </div>
                </div>
                </div>
            </section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

htmlcss

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

javascripthtmljquerycss

What could be the reason for the lack of a border below the navigation bar in this code?

I am attempting to create a navigation bar with a simple thin border that becomes thicker when hovered over. Although I have written the code below, it seems to not be working as intended. How can I fix this issue? #top-menu ul li a { display: block ...

htmlcss

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

javascripthtmlcssnode.jsnpm

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

Facing difficulties in retrieving my static files with Express and Node.js

I'm puzzled as to why express isn't able to access my static file to display my CSS. Here is the code snippet from express.js: app.use(express.static(__dirname + '/public')); Contents of style.css: <style type="text/css"> bod ...

cssnode.jsexpress

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

jqueryhtmlcss

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

Div's external dimension not being computed

I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While ...

javascriptjqueryhtmlcss

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

javascripthtmlcsshovertailwind-css

Is it possible to implement a custom radio tab index without using JavaScript

Is it possible to apply the tabindex attribute on custom radio buttons, hide the actual input element, and use keyboard shortcuts like Tab, Arrow Up, and Arrow Down to change the value? Check out this example on StackBlitz ...

javascripthtmlcssreactjs

Is there a way for me to manage the appearance of the printed document's layout?

I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...

javascriptcss

Updating all the direct components within the corresponding category with jQuery

Here is the HTML content I am working with: <li class="info"> info<li> <li class="other"> info<li> <li class="other"> info<li> <li class="Error"> error<li> <li class="other"> error<li> < ...

javascriptjqueryhtmlcss

Incorporate the list seamlessly into the remaining content of the page

https://i.sstatic.net/lIsnd.png https://i.sstatic.net/Nftto.png I am currently developing a Vue component that utilizes an API call to search for a list of cities based on user input. My challenge is ensuring that the displayed list does not overlap with ...

htmlcssvue.js

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Hey there, I've run into a bit of an issue with two divs containing tables - one acting as a header and the other as a scrollable content area. Everything is working perfectly except for this mysterious border/margin that keeps appearing in Chrome on ...

htmlcssgoogle-chrome

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I add a Mouse Scroll Click (Middle Button) event in ASP.NET and C#? I have already looked into the MouseWheel Event, but it did not provide the solution I was looking for. This is the order in which mouse events occur: MouseEnter MouseMo ...

c#asp.netcsseventsmouseevent

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

Adjusting webpage zoom based on different screen sizes

Hey there, I ran into an issue with my web page design. It looks great on my desktop monitors, but when I checked it on my laptop, things went haywire. Strangely, adjusting the zoom to 67% seemed to fix the problem. Both screens have a resolution of 1920 ...

javascripthtmlcsszooming

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js