overabundance of hexagonal background patterns

Is there a way to make my hexagon background image overflow properly?

I have designed hexagons using the following code:

--- CSS ---

#color5 {
   background-image: url(http://URL/images/Logo.jpg);
   background-color: purple;
   z-index: 1;
}
#hex3 {
  width: 300px;
  height: 300px;
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  z-index: -1;
  content: '';
  -webkit-transform: rotateZ(60deg);
}

.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  z-index: -1;
  -webkit-transform: rotateZ(-60deg);
}

** HTML **

<div id="eventinfo">
    <div id="hex3" class="hexagon-wrapper">
        <div id="color5" class="hexagon"></div>
    </div>
</div>

This results in the displayed design:

I aim to achieve:

How can I make this happen? I am at a loss and unable to find any useful information on Google.

Answer №1

I referenced a csstricks article to demonstrate a method that accomplishes the same goal you are striving for using clip-path

-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

You can view the example here

For more details, check out the complete article here

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

The divs descend one after another with no problems related to margins or padding

Having some trouble creating a unique WordPress theme with Bootstrap3. I can't seem to get my divs to behave properly and I've tried everything from display: inline, vertical-align: top, floats, clears, etc... but nothing seems to work. Here is ...

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

JavaScript code is experiencing issues following a for loop

I recently developed a code to upload resized images using HTML and JavaScript. Here is the HTML form setup: <form action="aa.php" method="post" id="uploadImageForm" enctype="multipart/form-data"> <input type="file" id="fileToUploadId" ...

How to Transfer Text from One Input Field to Another Multiple Times

I currently have two sets of input fields, each containing a 'mark' and a 'remark' field. <input name='mark[]'/><input name='remark[]'/><br/> <input name='mark[]'/><input name=&a ...

Challenges arise in CSS layout when incorporating PHP code

I have encountered an issue with the navigation bar on my webpage. When I insert the HTML directly into the page, there is no space above it. However, when I include an external HTML file using PHP's include function, a margin appears above the naviga ...

Error in clientWidth measurement providing inaccurate width

I recently adjusted the width of an image (img tag) to be 1150px * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } #background-image-myos { border: 2px solid black; border-radius: 5px; width: 1150px; } Sur ...

Using CSS to create various h1 headings with distinct colors and sizes

I am currently working with CSS and HTML, trying to replicate the design shown in this image: https://i.stack.imgur.com/Uyczp.png Initially, I attempted to achieve this by using multiple h1 tags, but after researching further, I realized that it is gener ...

HTML form not compatible with POST method in MVC

Why doesn't the $.post() method work in this case? I have tried pressing the button but it doesn't seem to post to EditClassLessonHour. This is the corresponding View Code: <div class="jumbotron"> <form id="editClassLessonHour"> ...

Best practices for implementing dual ngFor directives within a single tr element?

Click here to view the page The image attached shows the view I want to iterate through two ngFor loops inside the tr tag. When using a div tag inside the tr, it's looping the button next to the tag instead of where I want it in the file table header ...

The options in the Dropdown choices-js remain hidden beneath a div within a bootstrap table-responsive element

When utilizing the choices-js drop-down menu within a Bootstrap 5 responsive table, I am encountering display issues. Specifically, when ID 1 is selected, it appears incorrectly while ID 3 displays correctly. It is crucial that overflow-x incorporates a s ...

Switch Picture on Active List Item

I've implemented a two-tab content slider specifically for the mobile section of my website. Users can click on the linked image within the <li> element to load the corresponding content. My goal is to have the image change color when in an "act ...

Viewing an image from a local file on a web browser

I am currently working on a project where I want the user to be able to select a local image that will then be displayed on the page. As someone who is new to web development, I did a lot of research and found some helpful information on StackOverflow. I t ...

What is the best way to showcase an image that is being retrieved from PHP using ajax?

I need to show the image that is being received from PHP via ajax. I can display the name <span id="pic_name">Pic name here</span> but how can I display the image as <img src="images/pic/picname" /> //alert(a); $.ajax({ ...

What is the best way to create a large-scale matrix using SVG technology?

I want to create a 10000X10000 matrix in canvas/svg, with each cell containing a square. I attempted to accomplish this using canvas and two loops: for(i=0; i<10000; i++){ for(j=0;j<10000; j++){ /*some drawing code*/ console.log(i,' ...

JSDOM failing to retrieve complete list of elements from webpage

I'm currently struggling with a simple webscraper using JSDOM. Here's the code snippet I've been working on: const axios = require("axios"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; let v = "15" ...

Store user input in a paragraph

I want to create a unique program that allows users to input text in a field, and when they click "Start", the text will appear in a paragraph backwards. I plan to use Html, jQuery, and CSS for this project. Can anyone provide guidance on how to achieve th ...

JS code is not executing

I am experiencing some issues with my code and I can't seem to figure out why it's not working as intended. Basically, all I'm trying to do is change the height attribute value from '1000' to '2'. Here's the snippet ...

Steps to inserting a div element in the middle of two distinct background designs

I am looking to insert a div between two contrasting backgrounds. Here is an example of what it should look like: https://i.sstatic.net/5XUao.png As shown in the image, the div is positioned between a white and blue background. Can you help me achieve t ...

Create a PHP script that utilizes the DOMDocument class to parse and manipulate a table

Struggling to maintain the inner HTML tags while displaying rows in an HTML table? Can't seem to get it right and the tags keep getting stripped out? What's the best approach to ensure each row retains its inner HTML tags? Below is the code I ha ...

Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly du ...