{"id":29450,"date":"2017-03-13T19:01:15","date_gmt":"2017-03-13T11:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29450"},"modified":"2017-12-09T19:19:54","modified_gmt":"2017-12-09T11:19:54","slug":"css-triangle-generator","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/","title":{"rendered":"Create Pure CSS Triangles With This Free Web App"},"content":{"rendered":"<p>There\u2019s a big push to make the web a <strong>more CSS-friendly place<\/strong>. For years, <strong>images<\/strong> were always the <strong>solution to browser hacks<\/strong> from repeating backgrounds to the <a target=\"_blank\" href=\"https:\/\/alistapart.com\/article\/slidingdoors\">sliding doors technique<\/a>. But now it\u2019s easier than ever to <strong>create patterns, icons, and <a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-shadows\/\">special effects<\/a><\/strong> with CSS3.<\/p>\n<p>With <strong><a target=\"_blank\" href=\"https:\/\/triangle.designyourcode.io\/\">this triangle generator<\/a><\/strong>, you can design the <strong>size and shape of any triangle<\/strong> you want. It\u2019ll automatically <strong>spit out a CSS class<\/strong> which you can apply to any element.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-pattern-generators\/\">8 Free Pattern Generators for Repetitive Pattern Backgrounds<\/a>\n\t\t\t\t<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/triangle.designyourcode.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg\" alt=\"pure css generator\" width=\"1000\" height=\"448\"><\/a><\/figure>\n<p>In the options panels, you can change the triangle\u2019s <strong>color and direction<\/strong> (up\/down and sideways). You can also change the triangle\u2019s <strong>width\/height<\/strong> and even mess with the <strong>left\/right skew<\/strong> if you make a scalene triangle.<\/p>\n<p>This is by far one of the coolest web apps I\u2019ve ever seen. It\u2019s <strong>hosted on <a target=\"_blank\" href=\"https:\/\/designyourcode.io\/\">Designyourcode<\/a><\/strong> which is a site full of great blog articles and free web dev tools.<\/p>\n<p>And for all lovers of <strong>backward compatibility<\/strong>, you have the option to include the <strong><a target=\"_blank\" href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/ms532982(v=vs.85).as\">Microsoft.Chroma<\/a><\/strong> feature in CSS which <strong>adds support for IE6 users<\/strong>. <a target=\"_blank\" href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/ie6countdown\/\">Less than one percent<\/a> of the world even uses IE6 but it\u2019s still a nice option.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/triangle.designyourcode.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/02-scalene-triangle-css-example.jpg\" alt=\"css triangle creator\" width=\"1000\" height=\"486\"><\/a><\/figure>\n<p>To <strong>add a pure CSS triangle<\/strong> to your site, just <strong>copy\/paste the CSS class with the rules<\/strong> into your stylesheet. Then give this class to any <code>&lt;div&gt;<\/code> or empty block element.<\/p>\n<p>For example, to <strong>make an upward-pointing triangle<\/strong> you\u2019d copy the code and add an element like this:<\/p>\n<pre>\r\n&lt;span class=\"triangle-top\"&gt;&lt;\/span&gt;\r\n<\/pre>\n<p>That <code>&lt;span&gt;<\/code> could be <strong>a block-level element as well<\/strong>, or it could be <strong>positioned absolutely<\/strong> within another element.<\/p>\n<p>The possibilities are endless and this tool can <strong>offer a better alternative<\/strong> than the CSS <a target=\"_blank\" href=\"https:\/\/davidwalsh.name\/css-triangles\">border hack<\/a>. To get started, just visit the <strong><a target=\"_blank\" href=\"https:\/\/triangle.designyourcode.io\/\">triangle web app<\/a><\/strong> and <strong>change up the values<\/strong> to your liking.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/\">How to Create a Heart Shape with CSS<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>There\u2019s a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to the sliding doors technique. But now it\u2019s easier than ever to create patterns, icons, and special effects with CSS3. With this triangle generator, you can design the size and&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Pure CSS Triangles With This Free Web App - Hongkiat<\/title>\n<meta name=\"description\" content=\"There&#039;s a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Pure CSS Triangles With This Free Web App\" \/>\n<meta property=\"og:description\" content=\"There&#039;s a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-13T11:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-09T11:19:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Create Pure CSS Triangles With This Free Web App\",\"datePublished\":\"2017-03-13T11:01:15+00:00\",\"dateModified\":\"2017-12-09T11:19:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/\"},\"wordCount\":308,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-triangle-generator\\\/01-pure-css-triangle-generator.jpg\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/\",\"name\":\"Create Pure CSS Triangles With This Free Web App - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-triangle-generator\\\/01-pure-css-triangle-generator.jpg\",\"datePublished\":\"2017-03-13T11:01:15+00:00\",\"dateModified\":\"2017-12-09T11:19:54+00:00\",\"description\":\"There's a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-triangle-generator\\\/01-pure-css-triangle-generator.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-triangle-generator\\\/01-pure-css-triangle-generator.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-triangle-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Pure CSS Triangles With This Free Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Pure CSS Triangles With This Free Web App - Hongkiat","description":"There's a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/","og_locale":"en_US","og_type":"article","og_title":"Create Pure CSS Triangles With This Free Web App","og_description":"There's a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to","og_url":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-03-13T11:01:15+00:00","article_modified_time":"2017-12-09T11:19:54+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Create Pure CSS Triangles With This Free Web App","datePublished":"2017-03-13T11:01:15+00:00","dateModified":"2017-12-09T11:19:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/"},"wordCount":308,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg","keywords":["CSS","CSS Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/","url":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/","name":"Create Pure CSS Triangles With This Free Web App - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg","datePublished":"2017-03-13T11:01:15+00:00","dateModified":"2017-12-09T11:19:54+00:00","description":"There's a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-triangle-generator\/01-pure-css-triangle-generator.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Pure CSS Triangles With This Free Web App"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7F0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29450"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29450\/revisions"}],"predecessor-version":[{"id":42318,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29450\/revisions\/42318"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29450"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}