{"id":280153,"date":"2018-12-17T14:42:31","date_gmt":"2018-12-17T21:42:31","guid":{"rendered":"http:\/\/css-tricks.com\/?p=280153"},"modified":"2018-12-17T14:42:31","modified_gmt":"2018-12-17T21:42:31","slug":"a-css-venn-diagram","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-css-venn-diagram\/","title":{"rendered":"A CSS Venn Diagram"},"content":{"rendered":"

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside<\/code><\/a> property, it\u2019s possible to do this and without a ton of hacks, too.<\/p>\n

I also think it\u2019s super cute that Adrian has made the code snippets in this post look like the display from an old monitor, like the one Chris recently<\/a> broke down.<\/p>\n","protected":false},"excerpt":{"rendered":"

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it\u2019s possible to do this and without a ton of hacks, too. I also think it\u2019s super cute […]<\/p>\n","protected":false},"author":223806,"featured_media":280178,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"Sooo... Adrian Roselli's CSS Venn diagrams are pretty neat-o.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[881,1550,686,1124],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-venn.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":326010,"url":"https:\/\/css-tricks.com\/thinking-outside-the-box-with-css-grid\/","url_meta":{"origin":280153,"position":0},"title":"Thinking Outside the Box with CSS Grid","date":"November 18, 2020","format":false,"excerpt":"Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/book-grid-min.jpg?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341584,"url":"https:\/\/css-tricks.com\/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries\/","url_meta":{"origin":280153,"position":1},"title":"Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries","date":"June 3, 2021","format":false,"excerpt":"A little while back, Chris shared this nice hexagonal grid. And true to its name, it\u2019s using\u2009\u2014wait for it\u2009\u2014\u2009CSS Grid to form that layout. It\u2019s a neat trick! Combining grid columns, grid gaps, and creative clipping churns out the final result. A similar thing could be accomplished with flexbox, too.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/featured-image.png?fit=1200%2C524&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323780,"url":"https:\/\/css-tricks.com\/creating-css-shapes-with-emoji\/","url_meta":{"origin":280153,"position":2},"title":"Creating CSS Shapes with Emoji","date":"October 23, 2020","format":false,"excerpt":"CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents \u2014 usually text \u2014 around those elements to wrap along the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/css-shape-emoji.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367324,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-1\/","url_meta":{"origin":280153,"position":3},"title":"CSS Grid and Custom Shapes, Part 1","date":"August 15, 2022","format":false,"excerpt":"In a previous article, I looked at CSS Grid's ability to create complex layouts using its auto-placement powers. I took that one step further in another article that added a zooming hover effect to images in a grid layout. This time, I want to dive into another type of grid,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/FD3186CB-2199-4F34-8B68-D013284C35FC.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345274,"url":"https:\/\/css-tricks.com\/using-css-shapes-for-interesting-user-controls-and-navigation\/","url_meta":{"origin":280153,"position":4},"title":"Using CSS Shapes for Interesting User Controls and Navigation","date":"August 4, 2021","format":false,"excerpt":"Straight across or down, that\u2019s the proverbial order for user controls on a screen. Like a list of menu items. But what if we change that to a more fluid layout with bends, curves, and nooks? We can pull it off with just a few lines of code. In the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/shape-outside-navigation.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344355,"url":"https:\/\/css-tricks.com\/meet-has-a-native-css-parent-selector\/","url_meta":{"origin":280153,"position":5},"title":"Meet `:has`, A Native CSS Parent Selector","date":"July 12, 2021","format":false,"excerpt":"The reasons that are often cited that make container queries difficult or impossible is things like infinite loops\u2014e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, etc. But that was solved with containment. A \"parent selector\",\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/has-pseudo-example.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-venn.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280153"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=280153"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280153\/revisions"}],"predecessor-version":[{"id":280179,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280153\/revisions\/280179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280178"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=280153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}