Search code examples
csscss-shapes

Creating hexagon shapes with list items

I have tried multiple options and tutorials, however, I am dealing with a Wordpress site and can only customize the HTML output so much for this nav menu... How can I make this work for these two menu items in the header?

I am dealing with list items, so this doesn't exactly work the same way as the post that I was penalized against for being a duplicate. It deals with only one element whereas I have links wrapped in li's that are part of the nav bar, so a bit different.

I want this:

enter image description here

and the HTML/SCSS I am working with (unsuccessfully) is below:

http://codepen.io/anon/pen/wsodI

<ul id="menu-right-menu-buttons" class="right-menu">
<li id="menu-item-8439" class="first-item menu-item-type-post_type menu-item-object-page menu-item-8439"><a href="#">Businesses</a></li>
<li id="menu-item-8438" class="last-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-8438"><a href="#">Job Seekers</a></li>
</ul>

.right-menu {
    float: right;

    li {
        display: inline-block;
        position: relative;
        z-index: 9999;
        left: -100px;
        height: 20px; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent; 
        border-bottom: 100px solid #021e4e;

        a {
            vertical-align: middle;
            position: relative;
            top: 50%;
        }
    }

    li:after {
        position: relative; 
        height: 0px; 
        width: 200px; 
        border-top: 100px solid #021e4e; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent;
    }
}
Solution

  • You can create a triangle with the border property. You see a normal box like this if it has i.e 30px height 30px width and some border, lets give it 5px border

    enter image description here

    Now you see how the edges of the borders take form, then you can just give it height 0 and width 0 and you will have one side of the trapezium made by the borders to have length 0 so you have a triangle. Like this

    enter image description here

    Tha T is for top border, B for bottom border, R for fight border, and L for left bortder. Now you just give border color. You ca have R with color red and the other ones white and you will have a triangle pointing to the left. Same way with the L border.

    Now you can use a div to be a normal rectangle and use pseudoselectors, :after and :before to give it some border and make your two triangles at the beginning and the end and you will have your hexagon

    See the jsfiddle, I created an exagon for you with the border black to notice where the border is: http://jsfiddle.net/carloscalla/o742jd86/

    See the borders in #hexagon:after and #hexagon:before

    This is the result:

    enter image description here

    UPDATE: If you want the borders you can just overlap one Hexagon with another one like in this jsfiddle in pure CSS: http://jsfiddle.net/carloscalla/o742jd86/1/

    enter image description here

    Here are two other options you can get that working with only one element. I took them from other answer to show better options here

    http://codepen.io/hari_shanx/pen/tsLza

    http://codepen.io/anon/pen/sKamk

    enter image description here