{"id":9832,"date":"2011-06-17T17:34:27","date_gmt":"2011-06-18T00:34:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=9832"},"modified":"2018-07-18T07:15:03","modified_gmt":"2018-07-18T14:15:03","slug":"hexagon-with-shadow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/hexagon-with-shadow\/","title":{"rendered":"Hexagon with Shadow"},"content":{"rendered":"<pre rel=\"HTML\"><code class=\"language-html\">&lt;div class=\"hexagon\"&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/div&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">.hexagon {\r\n  width: 100px;\r\n  height: 55px;\r\n  position: relative;\r\n}\r\n\r\n.hexagon, \r\n.hexagon:before, \r\n.hexagon:after {\r\n  background: red;\r\n  box-shadow: 0 0 10px rgba(0,0,0,0.8);   \r\n}\r\n\r\n.hexagon:before,\r\n.hexagon:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 22px;\r\n  width: 57px;\r\n  height: 57px;\r\n  transform: rotate(145deg) skew(22.5deg);\r\n}\r\n\r\n.hexagon:before {\r\n  top: -29px;\r\n}\r\n\r\n.hexagon:after {\r\n  top: 27px;\r\n}\r\n\r\n.hexagon span {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100px;\r\n  height: 55px;\r\n  background: red;\r\n  z-index: 1;\r\n}<\/code><\/pre>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"ZjpbYR\" data-default-tab=\"css,result\" data-user=\"geoffgraham\" data-embed-version=\"2\" data-pen-title=\"CSS Hexagon\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/geoffgraham\/pen\/ZjpbYR\/\" rel=\"noopener\">CSS Hexagon<\/a> by Geoff Graham (<a href=\"https:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;div class=&#8221;hexagon&#8221;&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/div&gt; .hexagon { width: 100px; height: 55px; position: relative; } .hexagon, .hexagon:before, .hexagon:after { background: red; box-shadow: 0 0 10px rgba(0,0,0,0.8); } .hexagon:before, .hexagon:after { content: &#8220;&#8221;; position: absolute; left: 22px; width: 57px; height: 57px; transform: rotate(145deg) skew(22.5deg); } .hexagon:before { top: -29px; } .hexagon:after { top: 27px; } .hexagon span { position: absolute; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":254220,"url":"https:\/\/css-tricks.com\/snippets\/svg\/svg-patterns\/","url_meta":{"origin":9832,"position":0},"title":"SVG Patterns","date":"May 3, 2017","format":false,"excerpt":"The SVG <pattern> element allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like: Define a <pattern> inside of the SVGDefine the shapes inside of the patternUse the shapesCreate a new shape and fill it\u2026","rel":"","context":"In \"pattern\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13501,"url":"https:\/\/css-tricks.com\/snippets\/css\/tucked-corners\/","url_meta":{"origin":9832,"position":1},"title":"Tucked Corners","date":"August 9, 2011","format":false,"excerpt":"Content body { background: #e6e6e6; } .corners { background: #f6f6f6; height: 700px; margin: 50px auto; max-width: 600px; position: relative; width: 80%; box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2); } \/* Corner Effect *\/ .corners:after, .corners:before { background: #e6e6e6; content: ''; height: 50px; position: absolute; top: -25px; width: 100px; box-shadow:\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13264,"url":"https:\/\/css-tricks.com\/snippets\/css\/spinny-leaf-menu\/","url_meta":{"origin":9832,"position":2},"title":"Spinny Leaf Menu","date":"July 10, 2011","format":false,"excerpt":"Home Catalog Price About Contact nav { width: 960px; height: 100px; margin: 120px auto; text-align: center; } .top-menu li { display: inline-block; text-align: center; margin: 30px 5px; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .top-menu li:hover { margin: 30px 20px; } .top-menu\u2026","rel":"","context":"With 17 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15126,"url":"https:\/\/css-tricks.com\/snippets\/css\/smiley-slider\/","url_meta":{"origin":9832,"position":3},"title":"Smiley Slider","date":"November 20, 2011","format":false,"excerpt":"Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow. #face { width: 100px; height: 100px; position: relative; border: 2px\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195512,"url":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","url_meta":{"origin":9832,"position":4},"title":"Maintain Aspect Ratio Mixin","date":"February 10, 2015","format":false,"excerpt":"This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here's a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: \"\"; width: 100%; padding-top: ($height \/ $width)\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192753,"url":"https:\/\/css-tricks.com\/snippets\/sass\/covering-mixin\/","url_meta":{"origin":9832,"position":5},"title":"Covering Mixin","date":"January 9, 2015","format":false,"excerpt":"I find myself using these properties together all the time, which is typically a good opportunity for an abstraction like a mixin: @mixin coverer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For example, a full-page overlay: .overlay { @include coverer; background: rgba(black, 0.5); z-index: 1000;\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9832"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=9832"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9832\/revisions"}],"predecessor-version":[{"id":274291,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9832\/revisions\/274291"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9832"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}