Hexagon shape with CSS3

A simple search turned this up: CSS Hexagon Tutorial

Referenced from the site:

Put a 104px × 60px div with a background colour between them and you get (the hexagon):

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;

Related Posts:

  1. draw diagonal lines in div background with CSS
  2. Slanted border using CSS
  3. Adding border to CSS triangle [duplicate]
  4. force footer on bottom on pages with little content
  5. Dynamically change color to lighter or darker by percentage CSS
  6. How would you make two
  7. CSS “margin: 0 auto” not centering
  8. CSS3 Scale Animation Keyframes
  9. JavaFX css themes
  10. Border Position
  11. Bootstrap align navbar items to the right
  12. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  13. Using font awesome in codepen
  14. using media queries with LESS
  15. How can I apply styles to multiple classes at once?
  16. How to get multiple images to auto resize and stay centered within a div
  17. How to select label for=”XYZ” in CSS?
  18. margin: auto is not centering
  19. SSL Breaks WordPress CSS
  20. show classes as dropdown in guttenberg`s additional css classes input box
  21. wp_head() gives me some weird CSS
  22. How to Handle CSS Organization
  23. Style new block-editor alignfull class without scrollbars or overflow
  24. Changing title to lowercase [closed]
  25. How can I insert HTML attributes with an existing TinyMCE button?
  26. Hiding certain panels in dashboard
  27. how to make stylesheet appear in theme editor?
  28. How to change the order of the comment_form fields with css?
  29. customizing recent posts
  30. Why is WordPress changing my HTML code
  31. Best way to install Bulma (CSS Framework) with WordPress and Genesis
  32. Remove sticky behavior from top navigation on twenty fourteen theme?
  33. Include CSS with PHP without including wp-load?
  34. Loading different stylesheet on WordPress pages?
  35. Different css rules for TinyMCE and Gutenberg while using add_editor_style()
  36. Redoing home page but changes not taking effect
  37. How to create a custom CSS class for a specific page template?
  38. Gallery CSS Problem
  39. Responsive Author Style in BBpress?
  40. Older isotope portfolio rows shifting downward by 1 pixel on hover
  41. Shrink Header Image on Scroll
  42. Correct way to output styles gathered from theme or plugin settings?
  43. Remove extra white space bellow and above product short description in storefront woocommerce
  44. Inline Style attribute getting stripped off
  45. What does generate .less file? [closed]
  46. Can’t Display Table Headers in Responsive table layout
  47. Edit css for search results page
  48. How to stop my themes CSS changing the WordPress interface/?
  49. loading a custom stylesheet in a function
  50. Load jQuery only on home page
  51. how to hide submenus for the not active pages
  52. Why is the CSS horizontal alignment for divs inside div container not displayed in my WP Theme?
  53. Keeping CSS model open after form submission
  54. Sidebar button click redirect when user is not logged in instead displays it
  55. Add class to navigation link of page
  56. node.js and webpack throws error when trying to setup node to watch theme folder for saved changes
  57. Keep comments but turn off commenting
  58. How to remove Author and Category from a single portfolio page? [closed]
  59. why is my paypal button not clicable [closed]
  60. How can I selectively insert a header for my shop page in woocommerce? [closed]
  61. Change the search icon in twenty fourteen
  62. styling isnot working in wordpress theme
  63. Plugins not showing up for custom template
  64. Using True Type Fonts (ttf) [closed]
  65. Horizontal drop down category with hover effect working
  66. Child Theme style.css changes aren’t showing. Parent “style-less.css” over rides it, and won’t update
  67. Broken css on mobile phones only on https
  68. WordPress CSS completely broken on IIS
  69. WordPress Sudden Loss of All CSS And Tons of JQuery Errors
  70. Trying to hide HENTRY (Author Meta Data) from a Post ID
  71. Probleme d’emplacement
  72. Getting and setting CSS variables with JQuery in WordPress backend fails
  73. Theme: Twentynineteen // How to exclude cookie-control triangle and star svg from being overwridden by theme css “svg { fill: currentColor; }”
  74. Cannot add a class to metabox
  75. CSS does not Update
  76. Need help removing block of white space between footer widgets and footer [closed]
  77. How to make a sidebar form show at the top of page on mobile?
  78. Why child theme stylesheet takes long time to update?
  79. Navigation menu disappears when I hover the mouse [closed]
  80. I want to change change the arrangement of the grid of posts displayed by the theme on the Search page (read the description for better understanding)
  81. Can’t center post thumbnail with bootstrap [closed]
  82. Force include a stylesheet from parent theme
  83. Head section of the wordpress blog
  84. Altering the design of WooCommerce notifications [closed]
  85. Site name not showing in browser bar, only url
  86. Pages in another language
  87. Using a style sheet for modern browsers and another for older browsers
  88. Outputting the blogposts or the_content()
  89. How to insert a clickable and fixed background [duplicate]
  90. Apply Classes to post text inside editor
  91. Use of CSS classes in editor-blocks.css file
  92. Parent style messing up with Bootstrap [closed]
  93. Problems when writing a post
  94. Will the following code make my css deal with images in the optimum way?
  95. Interactive maps in wordpress
  96. How to add input search field with roudned corners?
  97. WordPress CSS not working properly
  98. Add Custom CSS Class in Child Theme [closed]
  99. Min height of page [closed]
  100. How to remove class=”wp-block-heading” from Heading tags?

Leave a Comment