An element with a hexagonal shape, featuring a side that is wider than the rest

I'm having an issue with the slope border bottom on my shape. Here's what I have:

I've managed to do the left and right sides, but I'm struggling with modifying the central part. Can someone please help me out?

Here is my code.

h3{
    font-size: 60px;
    position: relative;
    display: inline-block;
    padding: 10px 30px 8px 30px;
    height: 80px;
    width: auto;
    background: #000;
    line-height: 80px;
    margin-bottom: 20px;
    font-family: 'Bitter', 'Trebuchet MS', Arial;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    color: white;

}

h3::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
    position: absolute;
    left: -59px;
    top: 0px;
    background: red;
}
h3::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    position: absolute;
    right: -59px;
    top: 0px;
    background: red;
}

And the HTML simply consists of a <h3> header.

htmlcsscss-shapes

Answer №1

Take a look at this elegant pure css solution that effectively utilizes the transform and perspective properties.

div {
    cursor:pointer;
    width:200px;
    height:100px;
    transform:perspective(500px) rotateY(40deg);
    background:orange;
    margin:50px;
    overflow:visible;
}
div:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right:60px solid orange;
    margin-left:-60px;
}
div:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 60px solid orange;
    margin-left:200px;
    transition:.5s all;
}

div:hover{
    background:grey;
}
div:hover:before{
     border-left-color: grey;
}
div:hover:after{
    border-right-color: grey;

}
<div>

Answer №2

To create the desired shape, an innovative approach involving element rotation and perspective is utilized. This method involves:

  • Dividing the container into two halves using pseudo-elements
  • Rotating one half along the X-axis in one direction and the other half in the opposite direction, resulting in a elongated hexagon shape
  • Further rotating the entire parent along the Y-axis
  • All rotations are executed with a touch of perspective to give the illusion of varying width on each side

This technique can be applied to produce shapes with transparent, semi-transparent, or solid backgrounds.

Despite its advantages, there are some limitations to this CSS-based approach such as:

  • Challenges when fitting an image within the shape
  • Perspective and rotation adjustments may be required as the width increases
  • The hover effect may extend beyond the actual shape due to its construction, especially for elements like <h3> where hovering is less important

A sample code snippet demonstrating this method is provided below:

Alternatively, SVG can be used to overcome the drawbacks associated with the CSS approach when creating the desired shape.

.vector {
  position: relative;
  height: 100px;
  width: 300px;
  text-align: center;
  line-height: 100px;
  margin: 10px auto;
  font-size: 20px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
polygon {
  fill: rgba(0, 0, 0, 0.5);
}
polygon.solid{
  fill: maroon;
}
polygon.transparent{
  fill: transparent;
  stroke-width: 2;
  stroke: black;
}
polygon.image {
  fill: url(#image);
}
.vector span {
  position: relative;
  color: white;
  z-index: 2;
}
polygon:hover,
span:hover + svg polygon {
  fill: rgba(0, 0, 0, 0.3);
  stroke-width: 2;
  stroke: black;
}
/* just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' />
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class="solid"/>
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class="transparent"/>
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <defs>
      <pattern id='image' width='350' height='100' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/350/100' width='350' height='100' />
      </pattern>
    </defs>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class='image' />
  </svg>
</div>

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

Animate the entrance of mobile content as it slides into view while scrolling

I am currently working on a WordPress theme and facing an issue: When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to s ...

css

How can I prevent placeholder text from being included when submitting a form using serialize()?

After submitting my form, I save the data using an $.ajax function with $("#formName").serialize() call. One issue I'm facing is that the placeholder text gets submitted along with the serialize() action. I have a function in place to reset the plac ...

htmljqueryplaceholder

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

The ::before pseudo element is malfunctioning when used in the makeStyles function

I am currently utilizing the makeStyles function in React, but I seem to be facing an issue where the content within the ::before pseudo-element is not displaying. Strangely enough, when the content is an image it works fine, but text does not render. Jus ...

javascriptcssreactjsmaterial-uimakestyles

Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea. Specifically, I am trying to create a crescent moon shape with a border. My goal is to have a border around the red part of the cres ...

htmlcsscss-shapes

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...

javascriptjqueryhtml

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

javascripthtmlcssasp.net-mvcvisual-studio-2017

Ensure that the div remains fixed at the bottom even when multiple items are added

Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...

javascripthtmljquery

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

javascripthtmlcssvue.js

The process of automating CSS testing

We are currently in the process of developing a website using SharePoint 2010 for a client who already has an existing PHP website. We are working to ensure that the front end of the new site matches the styling of the client's current PHP site, speci ...

phphtmlcsssharepointsharepoint-2010

Attempting to position text both vertically and horizontally at the center beside an image

Visit my GitHub page here! Hello, I'm new to asking questions but I need help centering the text "Welcome to my site" both horizontally and vertically. I want it positioned halfway between the image and the right margin. I tried using display flex bu ...

htmlcsstextcenter

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

javascriptjqueryhtmlfunction

I prefer to have the links activate when the mouse hovers over them, rather than when hovering over empty

Is there a way to prevent the bottom links (music, contact, archive) from being highlighted when the mouse hovers over the empty space between them and not just on the actual links themselves? I want the mouse to only react to the links it hovers over and ...

csstumblr

Sub-menu disappears upon resizing the screen

Currently, I am working on creating a unique responsive navigation system that transforms into a 100% width pulldown menu for mobile devices. To achieve this functionality, I have implemented some JavaScript code that hides any open sub-menu items when the ...

javascriptjqueryhtmlcssresponsive-design

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

javascripthtml

How to load an iframe only upon clicking on a link

I am struggling to make the iframe popup appear only when a specific class link is clicked. Here is my HTML and JS code: Unfortunately, nothing happens when I click the link with the class 'aclass'. I have updated my JavaScript, but the issue ...

javascripthtml

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

Looking to populate an entire column with identical values in an HTML-PHP table?

Is there a way to set the same value in one column throughout an entire table? Take a look at this table: Table Image. For example, how can I assign the status of "Community Owner" to all players with a level of 7? Below is the code for the table: <t ...

phphtml

Activate the display of a subcategory when the class is modified

For the past couple of days, I've been grappling with this issue. Despite my best efforts, being new to javascript may be hindering my progress. My goal is to create a Side Navigation that highlights the current section you are on. Fortunately, I stu ...

javascriptjqueryhtmlcss

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

c#jqueryhtmlhtml5-canvasgetusermedia