Title: Help with a CSS Hexagon tutorial
Last modified: August 21, 2016

---

# Help with a CSS Hexagon tutorial

 *  [lisamattocks](https://wordpress.org/support/users/lisamattocks/)
 * (@lisamattocks)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/)
 * Hi
 * I am trying to make a small square thumb into a small hexagon. I have found a
   brilliant tutorial here: [http://jtauber.github.io/articles/css-hexagon.html](http://jtauber.github.io/articles/css-hexagon.html)
   and I have spent quite a while trying to figure out the CSS I would need to make
   it work on the site I am building but have had no success.
 * I am trying to make this [http://i.imgur.com/OBCetVM.png](http://i.imgur.com/OBCetVM.png)
   
   look like this [http://i.imgur.com/SWBWstl.png](http://i.imgur.com/SWBWstl.png)
 * Could anyone spare some brain cells to help me. I am completely stuck.
 * The site is here [http://tinyurl.com/l5s98pk](http://tinyurl.com/l5s98pk)
 * Many thanks

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425522)
 * Which square on your site are you trying to morph? Could you also post the CSS
   you’ve tried for this?
 *  Thread Starter [lisamattocks](https://wordpress.org/support/users/lisamattocks/)
 * (@lisamattocks)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425525)
 * Hi Andrew
 * Thanks for the quick response.
 * Its the .news-thumb
 * I have tried all the CSS in the tutorial.
 * .image_size_widget .news-thumb {
    height: 36px; width: 36px; height: 100px; width:
   100px; border-top: 30px solid #C66; border-bottom: 30px solid #6C6; border-left:
   30px solid #66C; border-right: 30px solid #CC6; width: 0; border-top: 30px solid#
   C66; border-bottom: 30px solid #6C6; border-left: 30px solid #66C; border-right:
   30px solid #CC6; width: 0; border-bottom: 30px solid #6C6; border-left: 30px 
   solid transparent; border-right: 30px solid transparent; width: 0; border-bottom:
   30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid
   transparent; width: 0; border-top: 30px solid #6C6; border-left: 52px solid transparent;
   border-right: 52px solid transparent; width: 0; border-bottom: 30px solid #6C6;
   border-left: 52px solid transparent; border-right: 52px solid transparent; width:
   104px; height: 60px; background-color: #6C6; width: 0; border-top: 30px solid#
   6C6; border-left: 52px solid transparent; border-right: 52px solid transparent;}
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425529)
 * Try this:
 *     ```
       .news-link,
       #top .news-content {
           overflow: visible;
       }
   
       #top .news-content {
           margin-bottom: 20px;
       }
   
       #top .news-thumb {
           background: red;
           width: 28px;
           height: 28px;
       }
   
       #top .news-thumb:before,
       #top .news-thumb:after {
         content: " ";
         position: absolute;
         left: 0;
         width: 0;
         border-left: 18px solid transparent;
         border-right: 17px solid transparent;
       }
   
       #top .news-thumb:before {
         border-bottom: 8px solid red;
         top: -3px;
       }
   
       #top .news-thumb:after {
         border-top: 8px solid red;
         bottom: -11px;
       }
       ```
   
 * _[http://cssdesk.com/jqWCQ](http://cssdesk.com/jqWCQ)_
 *  Thread Starter [lisamattocks](https://wordpress.org/support/users/lisamattocks/)
 * (@lisamattocks)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425534)
 * Thank you.
 * That is closer than I managed but still not there yet.
 * This is what I am aiming for [http://i.imgur.com/SWBWstl.png](http://i.imgur.com/SWBWstl.png)
 * This is what I have now [http://tinyurl.com/kz8besh](http://tinyurl.com/kz8besh)
 * If you have any other ideas they would be very gratefully received. I have found
   this really really tricky.
 * Thanks so much
 * Lisa
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425537)
 * The easiest solution you have is to use hexagon-shaped images
 *  Thread Starter [lisamattocks](https://wordpress.org/support/users/lisamattocks/)
 * (@lisamattocks)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425545)
 * Really good point.
 * If I can’t find another way to do it. That will have to suffice.
 * This [http://codepen.io/brenna/pen/hbDqL](http://codepen.io/brenna/pen/hbDqL)
   looks like it might prove useful. Although I am really not sure how I am going
   to get it to work with the site I am making.
 * If you have any ideas let me know.
 * Otherwise … thanks so much for your help. I hope you have a great day.
 * Lisa

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Help with a CSS Hexagon tutorial’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 6 replies
 * 2 participants
 * Last reply from: [lisamattocks](https://wordpress.org/support/users/lisamattocks/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/help-with-a-css-hexagon-tutorial/#post-4425545)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics