{"id":3453,"date":"2020-06-01T17:05:05","date_gmt":"2020-06-01T14:05:05","guid":{"rendered":"http:\/\/www.coding-dude.com\/wp\/?p=3453"},"modified":"2026-03-11T18:54:42","modified_gmt":"2026-03-11T15:54:42","slug":"create-a-triangle","status":"publish","type":"post","link":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/","title":{"rendered":"5 Ways To Create A Triangle With CSS"},"content":{"rendered":"<div class=\"9db0862b9cf2e44f8d962262c5a80491\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-3421619882899259\";\r\n\/* Coding Dude Medium Banner *\/\r\ngoogle_ad_slot = \"2969896483\";\r\ngoogle_ad_width = 468;\r\ngoogle_ad_height = 60;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>Probably the easiest way to add a triangle in a web page is to simply draw it in an image and add the image to the web page. There are many secrets to drawing the perfect triangle and you can read how to do that in Photoshop in this article: <a href=\"https:\/\/www.psd-dude.com\/tutorials\/triangle-photoshop.aspx\">Create A Triangle<\/a> in Photoshop or download this free pack of <a href=\"https:\/\/www.photoshopsupply.com\/vector\/triangle-shapes-for-photoshop\">triangle shapes<\/a> for Photoshop.<\/p>\n<p>In this post I will show you <strong>how to create a triangle with CSS &amp; HTML<\/strong>.<\/p>\n<p>Here&#8217;s an overview of the different methods I will use:<\/p>\n<ul>\n<li>Create a triangle using CSS <code>border<\/code><\/li>\n<li>Create a triangle with CSS gradients (<code>linear-gradient<\/code> and <code>conical-gradient<\/code>)<\/li>\n<li>Create a triangle using <code>overflow<\/code> and <code>transform<\/code><\/li>\n<li>Create a triangle using\u00a0<code>clip-path<\/code><\/li>\n<\/ul>\n<h2>Using\u00a0<code>border<\/code> to Create a Triangle in CSS<\/h2>\n<p>If you&#8217;ve searched the internet for how to make a CSS triangle, you&#8217;ve probably seen this awesome <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-triangle\/\">article<\/a> from CSS tricks. They quickly explain how to create a triangle using the CSS\u00a0<code>border<\/code> property.<\/p>\n<p>Let me quickly explain!<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-3468\" src=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.gif\" alt=\"CSS Triangle Border\" width=\"470\" height=\"456\" \/><\/p>\n<p>Consider the following HTML code:<\/p>\n<p><code>&lt;div class=\"triangle\"&gt;&lt;\/div&gt;<\/code><\/p>\n<p>And the CSS:<\/p>\n<pre><code>.triangle {\r\n    border-left: 20px solid cyan;\r\n    border-right: 20px solid red;\r\n    border-bottom: 20px solid green;\r\n    border-top: 20px solid blue;\r\n    display: inline-block;\r\n}<\/code><\/pre>\n<p>which will render like this:<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" title=\"Create Triangle with CSS Borders\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAAEDCAYAAAAx0WHLAAALuUlEQVR4Ae3dW1IqSRQFUIbWQ3NmPTQ6sEVRUQsqM+s8FhEVBVd\/8rhz5YZrhKezhwmYgAmcz+eTKZiACZjAZQIwkAMTMIHXCcBAEEzABGAgAyZgAh8T+LEZnF7O59PJZQYyUDUDL5dNfvP4GYPLBwpAAKIDoWQGXiG4KHfz+PzqyxcuXwSCk7Hqydh1Xe8QPIwBEEqeDF03Qvd1f4LgKQyAAARvF9Jn4BsET2MAhPRh6H4qdl7\/XQh2YQAEIGgI6TLwIwS7MQBCujB0PhG7r\/1XCIZgAAQgaAjhM\/AnBMMwAEL4MHQ\/FTuvfxMEQzEAAhA0hHAZ2AzBcAyAEC4MnU\/E7mt\/CIIpGAABCBrC4Rl4GIJpGADh8DB0PxU7r\/8pCKZiAAQgaAjLM\/A0BNMxAMLyMHQ+EbuvfRcESzAAAhA0hOkZ2A3BMgyAMD0M3U\/FzusfAsFSDIAABA1heAaGQbAcAyAMD0PnE7H72odCcAgGQACChrA7A8MhOAwDIOwOQ\/dTsfP6p0BwKAZAAIKG8HAGpkFwOAZAeDgMnU\/E7mufCkEIDIAABA3hzwxMhyAMBkD4MwzdT8XO618CQSgMgAAEDeFbBpZBEA4DIHwLQ+cTsfval0IQEgMgAEFDOC+HICwGQABCYxAOgSA0BkAAQkMQDoMgPAZAAEIjEA6FIAUGQABCAxAOhyANBkAAQmEQQkCQCgMgAKEgCGEgSIcBEIBQCIRQEKTEAAhAKABCOAjSYgAEICQGISQEqTEAAhASghAWgvQYAAEIiUAIDUEJDIAAhAQghIegDAZAAEJgEFJAUAoDIAAhIAhpICiHARCAEAiEVBCUxAAIQAgAQjoIymIABCAcCEJKCEpjAAQgHABCWgjKYwAEICwEITUELTAAAhAWgJAegjYYAAEIE0EoAUErDIAAhAkglIGgHQZAAMJAEEpB0BIDIABhAAjlIGiLARCAsAOEkhC0xgAIQHgChLIQtMcACEB4AITSEMDgfD4BAQgbQCgPAQzeMAACEH4BoQUEMLjBAAhAuANCGwhg8AUDIADhBoRWEMDgDgZAAMLpfG4HAQx+wAAIrUFoCQEMfsEACC1BaAsBDP7AAAitQGgNAQw2YACEFiC0hwAGGzEAQmkQQPD2Xyjnj8fll\/HuPl5\/S++yIbpfL+fSm+JyOHS7QHDzQ7\/Z\/TDYgh0QyoABghsIvE14su0AIT0IIPgCAQyexMBnCKkxAMEdCGCwAwMgpAQBBD9AAIOdGAAhFQgg+AUCGAzAAAgpQADBHxDAYBAGQAgNAgg2QACDgRgAISQIINgIAQwGYwCEUCCA4AEIYDABAyCEAAEED0IAg0kYAOFQEEDwBAQwmIgBEA4BAQRPQgCDyRgAYSkIINgBAQwWYACEJSCAYCcEMFiEARCmggCCARDAYCEGQJgCAggGQQCDxRgAYSgIIBgIAQwOwAAIQ0AAwWAIYHAQBkDYBQIIJkAAgwMxAMJTIIBgEgQwOBgDIDwEAggmQgCDABgAYRMIIJgMAQyCYACEX0EAwQIIYBAIAyDcBQEEiyCAQTAMgPAJBBAshAAGATEAwisIIFgMAQyCYtAcBBAcAAEMAmPQFAQQHAQBDIJj0AwEEBwIAQwSYNAEBBAcDAEMkmBQHAQQBIAABokwKAoCCIJAAINkGBQDAQSBIIBBQgyKgACCYBDAICkGyUEAQUAIYJAYg6QggCAoBDBIjkEyEEAQGAIYFMAgCQggCA4BDIpgEBwEECSAAAaFMAgKAgiSQACDYhgEAwEEiSCAQUEMgoAAgmQQwKAoBgeDAIKEEMCgMAYHgQCCpBDAoDgGi0EAQWIIYNAAg0UggCA5BDBogsFkEEBQAAIYNMJgEgggKAIBDJphMBgEEBSCAAYNMRgEAgiKQQCDphjsBAEEBSGAQWMMngQBBEUhgEFzDB4EAQSFIYABDE4bQQBBcQhgAINXDP4AAQQNIIABDN4x+AEEEDSBAAYw+ITBFxBA0AgCGMDgGwZvIICgGQQwgMFdDP59Ob\/803AzXDZE5+v88bjk4u7jbmAuJ4ir3gz+fTmfXk6vFxCa4XCz+2HQHbcbCIDQDAJvE7Sb93Z3BwIgNANBMwDC6RcIgNAIBBg0x2ADBEBoAgIMGmPwAARAaAACDJpi8AQEQCgOAgwaYrADAiAUBgEGzTAYAAEQioIAg0YYDIQACAVBgEETDCZAAIRiIMCgAQYTIQBCIRBgUByDBRAAoQgIMCiMwUIIgFAABBgUxeAACICQHAQYFMTgQAiAkBgEGBTDIAAEQEgKAgwKYRAIAiAkBAEGRTAICAEQkoEAgwIYBIYACIlAgEFyDBJAAIQkIMAgMQaJIABCAhBgkBSDhBAAITgIMEiIQWIIgBAYBBgkw6AABEAICgIMEmFQCAIgBAQBBkkwKAgBEIKBAIMEGBSGAAiBQIBBcAwaQACEICDAIDAGjSAAQgAQYBAUg4YQAOFgEGAQEIPGEADhQBBgEAwDEJyBcBAIMAiEAQjeIQDCASDAIAgGIPgGARAWgwCDABiA4EcIgLAQBBgcjAEI\/oQACItAgMGBGIBgMwRAWAACDA7CAAQPQwCEySDA4AAMQPA0BECYCAIMFmMAgt0QAGESCDBYiAEIhkEAhAkgwGARBiAYDgEQBoMAgwUYgGAaBEAYCAIMJmMAgukQAGEQCDCYiAEIlkEAhAEgwGASBiBYDgEQdoIAgwkYgOAwCICwAwQYDMYABIdDAIQnQYDBQAxAEAYCIDwBAgwGYQCCcBAA4UEQYDAAAxCEhQAID4AAg50YgCA8BEDYCAIMdmAAgjQQAGEDCDB4EgMQpIMACH+AAIMnMABBWgiA8AsIMHgQAxCkhwAIP4AAgwcwAEEZCIBwBwQYbMQABOUgAMIXEGCwAQMQlIUACDcgwOAPDEBQHgIgvIEAg18wAEEbCIBwuqHg\/z3x6R+uLy7f1u4CQTsI2oNw3fBv+\/3m5cdTEJzabozrBul2f\/nn5r30qcnzjy3\/evjfvPx42goDjQB8L\/\/j3w6Ejy0PgxMIQPAGwbUJtQIBBm+fh4AABF8gaAcCDM5njcBnIteN\/9O9RUNoj4FGoBH80Ai+wlAehNYYgAAEGyG4wlAahLYYgAAED0JQHoSWGIAABE9CUBqEdhiAAAQ7ISgLQisMQACCQRCUBKENBiAAwWAIyoHQAgMQgGASBKVAKI8BCEAwGYIyIJTGAAQgWARBCRDKYgACECyGID0IJTEAAQgOgiA1COUwAAEIDoYgLQilMAABCIJAkBKEMhiAAATBIEgHQgkMQACCoBCkAiE9BiAAQXAI0oCQGgMQgCAJBClASIsBCECQDILwIKTEAAQgSApBaBDSYQACECSHICwIqTAAAQiKQBAShDQYgAAExSAIB0IKDEAAgqIQhAIhPAYgAEFxCMKAEBoDEICgCQQhQAiLAQhA0AyCw0EIiQEIQNAUgkNBCIcBCEDQHILDQAiFAQhAAIJPGVj6tx3DYACCTyG4ng7u\/lz8MhBCYAACEGgEv2ZgCQiHYwCCX0OgGWgG1wxMB+FQDEAAAo3goQxMBeEwDEDwUAiup4O7pjANhEMwAAEINIJdGZgCwnIMQLArBJqBZnDNwHAQlmIAAhBoBEMzMBSEZRiAYGgIrqeDu6YwDIQlGIAABBrB1AwMAWE6BiCYGgLNQDO4ZmA3CFMxAAEINIKlGdgFwjQMQLA0BNfTwV1TeBqEKRiAAAQawaEZeAqE4RiA4NAQaAaawTUDD4MwFAMQgEAjCJWBh0AYhgEIQoXgejq4awqbQRiCAQhAoBGEzsAmEHZjAILQIdAMNINrBv4EYRcGIACBRpAqA7+C8DQGIEgVguvp4K4p\/AjCUxiAAAQaQeoM3AXhYQxAkDoEmoFmcM3ANxAewgAEINAISmXgEwibMQBBqRBcTwd3TeEdhE0YgAAEGkHpDLyCsAWDm+\/x1ARMoMEETg3WaIkmYAIbJgCDDUPyLSbQYQIw6PBTtkYT2DCB\/wBUQ1QTuTVKjAAAAABJRU5ErkJggg==\" alt=\"Create Triangle with CSS Borders\" width=\"259\" height=\"259\" \/><\/p>\n<p>This is because the borders of an HTML element form an angle where they join. We can make use of this to create a triangle by setting a transparent color for 3 of the borders and leaving only one visible. So, the bottom border will create a triangle pointing up, the left border will create a triangle pointing right and so on.<\/p>\n<p>Here&#8217;s the CSS code for creating a green triangle pointing up:<\/p>\n<pre><code>.triangle-up {\r\n    border-left: 20px solid transparent;\r\n    border-right: 20px solid transparent;\r\n    border-bottom: 20px solid green;\r\n    border-top: 20px solid transparent;\r\n    display: inline-block;\r\n}<\/code><\/pre>\n<p>which renders like this:<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" title=\"Create Triangle Poiting Up\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAACbCAYAAACET+UoAAAH7UlEQVR4Ae3dDW7bOBAG0Bw9N9ujeZG2VoKYsimaP0PyBSii0BRFfZx5GywK9OPmSwISkMC\/BD4kIQEJSOCeABDuSfguAQncgKAIJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFG4kIAEgKAGJCCBIwEgHFHsefH53+ft648vCXwlAISN6+ALgo\/Pjz9\/oLBxIfx4dSD8CGOny58YQGGnk3\/+rkB4ns+Sn6YwgMKSR335pYBwObK5b3iGARTmPtsauwdCjRQnWSMHAyhMcpiNtgmERsFGW\/YKBlCIdnr99gOEflkPe1IJBlAYdlxDHwyEofG3f\/g7GECh\/flEewIQop1Ixf3UwAAKFQ9kgqWAMMEhlWyxJgZQKDmBOe8Bwpzn9nTXLTCAwtPIl\/kQCMsc5d8XaYkBFBYrlsTrACERyqxDPTCAwqzVkbdvIOTlFH5WTwygEL4cijcIhOLo4tw4AgMoxDn\/mjsBQs00B6w1EgMoDDjwxo8EQuOAWy4fAQMotDzh\/msDoX\/mVZ4YCQMoVDnSEIsAIcQxXNtERAygcO0Mo84GQtSTOdlXZAygcHJoEw0DYaLDmgEDKExUUImtAiERSsShmTCAQsQKytsTEPJyGjprRgygMLRkih8OhOLo+tw4MwZQ6FMjNZ8ChJppVl5rBQygULkoGi8HhMYBly6\/EgZQKK2C\/vcBoX\/mL5+4IgZQeHnsISYAIcQxfG9iZQyg8H3OUa+AEOhkdsAACoEKLrEVICRCGTG0EwZQGFFhec8EQl5OTWftiAEUmpZU8eJAKI6uzo07YwCFOjVUcxUg1Ezz4low+LhB4WLRNJ4OhMYBny0Pg28MoHBWJf3HgdA\/8xsMHjGAwoBCTDwSCIlQWg7B4BwDKLSsvLy1gZCXU5VZMHiNARSqlFrxIkAoju7ajTDIxwAK12qr5mwg1EzzZC0YXMcACifF1HgYCI0DhkE5BlBoXJyJ5YGQCKXWEAzexwAKtaoxbx0g5OV0eRYM6mEAhcvlV3wDEIqjO78RBvUxgMJ5vdX8BAg107zd\/KWjz3YYQKFysSaWA0IilNIhvxm0xwAKpdWZdx8Q8nJ6OQsG\/TCAwstyLJ4AhOLovm+EQX8MoPBdfzWvgPBmmjAYhwEU3izexO1ASISSOwSD8RhAIbda8+YBIS+nh1kwiIMBFB7Ks3gACAXRwSAeBlAoKOTELUBIhPJsCAZxMYDCs8rN+wwIeTn9mQWD+BhA4UJBJ6YCIRFKaggG82AAhVQF540BISMnGMyHARQyCjsxBQiJUH4OwWBeDKDws5LzroHwJCcYzI8BFJ4UeOIjICRC+RqCwToYQOGkyBPDQEiEAoP1MIBCotATQ0D4FQoM1sUACr+KPfEjEH6EAoP1MYDCj4JPXALhXygw2AcDKCQk+DcEBP8D8fgXmO+NstP3r\/8Q+PpOYHsQ\/Gaw328Gv8GDAhD+JAADGNxxgMJfFLb9DQEGMLhjcP8OhdttSxBgAIM7Ar+\/747CdiDAAAa\/Efj9884obAUCDGDwu\/nPft4VhW1AgAEMzpr\/bHxHFLYAAQYwOGv6V+O7obA8CDCAwaumf\/X5TigsDQIMYPCq2XM\/3wWFZUGAAQxymz133g4oLAkCDGCQ2+RX562OwnIgwAAGV5v86vyVUVgKBBjA4Gpzl85fFYVlQIABDEqbu\/S+FVFYAgQYwKC0qd+9bzUUpgcBBjB4t6nfvX8lFKYGAQYweLeZa92\/CgrTggADGNRq5lrrrIDClCDAAAa1mrj2OrOjMB0IMIBB7Sauvd7MKEwFAgxgULt5W603KwrTgAADGLRq3lbrzojCFCDAAAatmrb1urOhEB4EGMCgddO2Xn8mFEKDAAMYtG7WXuvPgkJYEGAAg17N2us5M6AQEgQYwKBXk\/Z+TnQUwoEAAxj0btLez4uMQigQYACD3s056nlRUQgDAgxgMKo5Rz03IgohQIABDEY15ejnRkNhOAgwgMHophz9\/EgoDAUBBjAY3YxRnh8FhWEgwAAGUZoxyj4ioDAEBBjAIEoTRtvHaBS6gwADGERrwmj7GYlCVxBgAINozRd1P6NQ6AYCDGAQtfmi7msECl1AgAEMojZd9H31RqE5CDCAQfSmi76\/nig0BQEGMIjebLPsrxcKzUCAAQxmabZZ9tkDhSYgwAAGszTZbPtsjUJ1EGAAg9mabLb9tkShKggwgMFszTXrfluhUA0EGMBg1uaadd8tUKgCAgxgMGtTzb7v2ii8DQIMYDB7U82+\/5oovAUCDGAwezOtsv9aKBSDAAMYrNJMq7xHDRSKQIABDFZpotXe410ULoMAAxis1kSrvc87KFwCAQYwWK15Vn2fUhSyQYABDFZtnlXfqwSFLBBgAINVm2b197qKwksQYACD1Ztm9fe7gsJTEGAAg9WbZZf3y0XhFAQYwGCXZtnlPXNQSIIAAxjs0iS7vecrFB5AgAEMdmuS3d73GQoPINx8SUAC2yYAhG2P3otL4DEBIDxmYkQC2yYAhG2P3otL4DEBIDxmYkQC2yYAhG2P3otL4DEBIDxmYkQC2yYAhG2P3otL4DGB\/wHV6nc+86y6kQAAAABJRU5ErkJggg==\" alt=\"Create Triangle Poiting Up\" width=\"260\" height=\"155\" \/><\/p>\n<p>And now, a bit of math.<\/p>\n<p>As you can see, this triangle is a <strong>right triangle<\/strong>. So, the upper angle is 90 degrees. It&#8217;s also an <strong>isosceles triangle<\/strong> because it has two equal sides. When setting the same size for all the borders, we are actually setting the height of the triangle.<\/p>\n<p>So, 20 pixels in our case.<\/p>\n<p>Because our triangle is a right triangle and isosceles, we can determine that the base of the triangle is 40 pixels (half of the border size we used). Then each sides is equal to\u00a0<code>basis \/ sqrt(2)<\/code> so approximately 28.2 pixels.<\/p>\n<p>Triangles are very useful design elements for all sort of applications. Group more triangles and you get a star! Check out my <a href=\"https:\/\/www.coding-dude.com\/wp\/css\/css-star\/\">CSS star shape<\/a> tutorial to see how you can create and use stars in your web design.<\/p>\n<h2>How To Make An Equilateral Triangle Using <code>border<\/code><\/h2>\n<p>What if we want the triangle to be equilateral? So, all three sides of the triangle to be equal?<\/p>\n<p>Let&#8217;s do some math!<\/p>\n<p>In the previous example, we&#8217;ve seen that the border size actually decides the height of the triangle. The formula for the height of the equilateral triangle is:<\/p>\n<p><code>height = side * sqrt(3) \/ 2<\/code><\/p>\n<p>We also need to keep in mind, that our basis is twice the size of the border we chose.<\/p>\n<p>So, for a <code>border-width<\/code> set to 20px for the transparent borders, we need to set the border size to\u00a0<code>2 * 20px * sqrt(3) \/ 2<\/code><\/p>\n<p>We can approximate <code>sqrt(3)\/2<\/code> to roughly 0.866 so here&#8217;s the CSS equilateral triangle:<\/p>\n<pre><code>.triangle-up-equilateral {\r\n    border-left: 20px solid transparent;\r\n    border-right: 20px solid transparent;\r\n    border-bottom: calc(2 * 20px * 0.866) solid green;\r\n    border-top: 20px solid transparent;\r\n    display: inline-block;\r\n}<\/code><\/pre>\n<p>which renders like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"CSS Equilateral Triangle\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAAD9CAYAAAB0pyj9AAARs0lEQVR4Ae2XBbRVVRdGsVuH3d3d3Tns7u7u7kGK0qmAQZfSJaEiJSDdoAgmoYJ0SJx\/LH+3At533r3nnth7r\/mNwQDfe\/e+e+b69tzLMgGBAAQgEJFAmYiv42UQgAAEAgRCCSAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbHCyEAAQRCByAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbHCyEAAQRCByAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbHCyEAAQRCByAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbHCyEAAQRCByAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbHCyEAAQRCByAAgcgEEEhkdLwQAhBAIHQAAhCITACBREbn5ws7TOoQyB8CgXwIIJB8KCn6maPfOzqQPwQC+RBAIPlQUvIz1b+qHpQpW+avP\/JvAoHSCCCQ0ggp+f6vi38Ntqq81T8CkX\/L1wgEwgggkDA6ir73WPfH\/pGH2ULkawQCYQQQSBgdJd8b+vPQ\/8jDSES+RyBQEgEEUhIZRV+\/tOWlJQpEvkcgUBIBBFISGSVfbz2udYnyMFuI\/AyBQC4CCCQXFUVfO6TeIaUKRH6GQCAXAQSSi4qSr7014K1S5WG2EPlZAoF1CSCQdYko+e+f5v8UbFxh47wFIj8rryEQWJMAAlmThqJ\/39\/l\/rzlYbYQeQ2BwJoEEMiaNJT8u\/\/3\/QuWh5GIvJZAwBBAIIaEor\/Pa3peZIHIawkEDAEEYkgo+bvJ6CaR5WG2EHkPAgEhgEAU9WD16tXBvrX2LVog8h7yXgQCCERRB97s+2bR8jBbiLwXgQACUdKBqXOnxiYPIxF5T6KbAAJRMv87OtwRu0DkPYluAghEwfz7fNcndnmYLUTem+glgEAUzP70j05PTCDy3kQvAQTi+ewbDm+YmDzMFiK\/g+gkgEA8nvvSFUuD3arvlrhA5HfI7yL6CCAQj2f+Up+XEpeH2ULkdxF9BBCIpzOf8OuE1ORhJCK\/k+gigEA8nfeNn9yYukDkdxJdBBCIh\/PuOqVr6vIwW4j8bqKHAALxcNYnNDohM4HI7yZ6CCAQz2ZdZ2idzORhthD5DEQHAQTi0ZznLZ0XbP\/O9pkLRD6DfBbiPwEE4tGMn+75dObyMFuIfBbiPwEE4smMR84caY08jETkMxG\/CSAQT+Z7VeurrBOIfCbiNwEE4sF8201sZ508zBYin434SwCBeDDbI9890lqByGcj\/hJAII7PtuqgqtbKw2wh8hmJnwQQiMNznbVoVrDFW1tYLxD5jPJZiX8EEIjDM32k2yPWy8NsIfJZiX8EEIijMx3802Bn5GEkIp+Z+EUAgTg6z4tbXOycQOQzE78IIBAH59lybEvn5GG2EPnsxB8CCMTBWR5U9yBnBSKfnfhDAIE4NsuK\/Ss6Kw+zhcgzED8IIBCH5vjDvB+CDctv6LxA5BnkWYj7BBCIQzO8t\/O9zsvDbCHyLMR9AgjEkRl+Of1Lb+RhJCLPRNwmgEAcmd85Tc7xTiDyTMRtAgjEgfl9NOoj7+RhthB5NuIuAQRi+exWrloZ7F1zb28FIs8mz0jcJIBALJ\/b61+87q08zBYiz0jcJIBALJ7bN3O+8V4eRiLyrMQ9AgjE4pnd1v42NQKRZyXuEUAgls6s19ReauRhthB5ZuIWAQRi6bxO\/fBUdQKRZyZuEUAgFs7rvWHvqZOH2ULk2Yk7BBCIZbNa\/OfiYJdqu6gViDy7MCBuEEAgls3phd4vqJWH2UKEAXGDAAKxaE7jZo9TLw8jEWFB7CeAQCya0fUfX49Aypb5i4GwIPYTQCCWzKjz5M7I4295mC1EmBC7CSAQS+ZzXMPjEMg6AhEmxG4CCMSC+dQaUgt5rCMPs4UIG2IvAQSS8WzmLJkTbPv2tgikBIEIG2FE7CSAQDKey5OfPok8SpCH2UKEEbGTAALJcC7DZwxHHqXIw0hEWBH7CCCQDGdyRasrEEieAhFWxD4CCCSjmXw84WPkkac8zBYizIhdBBBIRvM4vP7hCKRAgQgzYhcBBJLBPN4Z+A7yKFAeZgsRdsQeAggk5VnMWDgj2KzSZggkokCEnTAkdhBAICnP4aGuDyGPiPIwW4gwJHYQQCApzmHQj4OQR5HyMBIRliR7AggkxRlc2PxCBBKTQIQlyZ4AAklpBs3HNEceMcnDbCHClGRLAIGkxP+AOgcgkJgFIkxJtgQQSAr8y\/crjzxilofZQoQtyY4AAkmY\/fQ\/pgfrl1sfgSQkEGErjEk2BBBIwtzv7nQ38khIHmYLEcYkGwIIJEHuX0z7AnkkLA8jEWFN0ieAQBJkflbjsxBISgIR1iR9AggkIeYfjPwAeaQkD7OFCHOSLgEEkgDvP1f+GexZY08EkrJAhLmwJ+kRQCAJsH7181eRR8ryMFuIsCfpEUAgMbOe\/Ptk5JGRPIxEZAYkHQIIJGbOt7S7BYFkLBCZAUmHAAKJkXOPb3sgj4zlYbYQmQVJngACiZHxye+fjEAsEYjMgiRPAIHExLj+1\/WRhyXyMFuIzIQkSwCBxMB34fKFwU5Vd0IglglEZiKzIckRQCAxsH2u13PIwzJ5mC1EZkOSI4BAimQ7ZtYY5GGpPIxEZEYkGQIIpEiu17a9FoFYLhCZEUmGAAIpgmvHSR2Rh+XyMFuIzIrETwCBFMH0mAbHIBBHBCKzIvETQCARmdYYXAN5OCIPs4XIzEi8BBBIBJ6\/Lf4t2Lry1gjEMYHIzGR2JD4CCCQCy8d7PI48HJOH2UJkdiQ+AgikQJZf\/\/I18nBUHkYiMkMSDwEEUiDHy1pehkAcF4jMkMRDAIEUwLHN+DbIw3F5mC1EZkmKJ4BACmB4aL1DEYgnApFZkuIJIJA8GVYeUBl5eCIPs4XITElxBBBIHvx+XvBzsEnFTRCIZwKRmcpsSXQCCCQPdg90eQB5eCYPs4XIbEl0AgikFHYDfhiAPDyVh5GIzJhEI4BASuF2frPzEYjnApEZk2gEEEgIt6ajmyIPz+VhthCZNSmcAAIJYbZf7f0QiBKByKxJ4QQQSAnMyvYtizyUyMNsITJzUhgBBJKD13dzv0MeyuRhJCKzJ\/kTQCA5WN3Z8U4EolQgMnuSPwEEsg6rz777DHkolYfZQqQDJD8CCGQdTmd8dAYCUS4Q6QDJjwACWYNToxGNkIdyeZgtRLpASieAQP5mtGzFsmD36rsjEATyVwekC9IJEk4AgfzN5+XPXkYeyGOtDkgnSDgBBBIEwcTfJq5VHLPG8ncZ9VykG6RkAggkCIKbPrlJ\/UFBlrllKd0gJRNQL5Bu33RDHvyvS2gHpCMkNwH1Ajmx0Ymh5eFmzn0za+IiHSG5CagWSN2hdZEH20deHZCukP8SUCuQ+cvmBztU2SGv8mi6bXnW3BuXdEU6Q9YmoFYgz\/R8BnmwfRTUAekMWZuASoGMmjmqoOJwK+e+lTVyke6QfwmoFMjVba5GIGwfkTog3SH\/ElAnkPYT20cqjsbblmfOvXlJh8j\/CagTyFHvHYVA2D6K6oB0iCgUSLWvqhVVHG7k3DeyRi7SJRIEajaQ2YtmB1u+tSUCYfuIpQPSJemU9qgRyKPdH42lOBpvW5459+YlndIeFQIZ8vMQ5MHmkUgHpFuao0Igl7S4JJHycDPnvpk1cZFuaY73Amk1rhXyYPtItAPSMa3xXiAH1z040fJoum151twbl3RMa7wWSKX+lZAH20cqHZCuaYy3Avlx\/o\/BRhU2SqU83My5b2ZNXKRr0jlt8VYg93W+D3mwfaTaAemctngpkH7f90u1OJpuWp41fNuS7mmKlwI5t+m5CITtI5MOSPc0xTuBNB7VOJPicDOH38ya+EgHtcQrgaxavSrYp9Y+CITtI9MOSAelixrilUDe+OKNTIuj6ZblWcM3LumihngjkG\/nfIs82Dys6oB00vd4I5DbO9xuVXm4ocNvaA18pJO+xwuB9J7aG3mwfVjZAemmz\/FCIKd9eJqV5dFwy\/KM4ZuWdNPnOC+QBsMbIA+2D6s7IB31NU4LZMmfS4Jdq+1qdXm4ocNvaA18pKPSVR\/jtEBe7PMi8mD7cKID0lUf46xAxv863oniaLhhecb8tizprG9xViA3fHwDAmH7cKoD0lnf4qRAukzp4lRxuKHzu6E1cJLu+hQnBXJ8w+MRCNuHkx2Q7voU5wRSe0htJ4uj4XblGfPbtKTDvsQpgcxdOjfY7p3tEAjbh9MdkA5Ll32IUwJ56tOnnC4ON3R+N7QGTtJlH+KMQEbMGIE82Dy86oB02vU4I5ArW1\/pVXk03LI8Y\/jGJZ12PU4I5JMJnyAPtg8vOyDddjlOCOSId4\/wsjzc0OE3tAY+0m2XY71AqgyqgjzYPrzugHTc1VgtkJkLZwabV9rc6\/JouGV5xvBNSzouXXcxVgvk4W4PIw+2DxUdkK67GGsF8tWPX6koDrdz+O2siY903rVYK5CLml+EQNg+VHVAOu9arBRIi7EtVBVH0y3Ls4ZvXNJ9l2KlQA6scyACYftQ2QHpvkuxTiAV+lVQWRxu5vCbWRMfOQOuxCqBfD\/v+2CD8hsgELYP1R2QMyBnwYVYJZB7Ot2jujiablmeNXzjkrPgQqwRSN\/pfZEHmwcdWKMDciZsjzUCObvJ2ZRnjfJwQ4ff0Br4yJmwPVYI5MORHyIP5EEHcnRAzobNyVwgK1atCPaquRflyVEeDbcszxi+acnZkDNiazIXyGufv4Y8kAcdCOmAnBFbk6lApvw+heKEFIfbOfx21sRHzoqNyVQgt7a\/FYEgEDqQRwfkrNiYzATS89ueFCeP4mi6ZXnW8I1LzoxtyUwgp3xwCgJBIHSggA7ImbEtmQjk3WHvUpwCisPNHH4za+IjZ8empC6QRcsXBTtX3RmBIBA6EKEDcnbkDNmS1AXyfO\/nKU6E4mi6ZXnW8I1LzpAtSVUgY2ePRR7Igw7E0AE5SzYkVYFc1\/Y6yhNDebihw29oDXzkLNmQ1ATSaXIn5IE86ECMHZAzlXVSE8ixDY6lPDGWR8MtyzOGb1pyprJOKgKpObgm8kAedCCBDsjZyjKJC+T3Jb8H27y9DeVJoDzc0OE3tAY+crbkjGWVxAXyRI8nkAfyoAMJdkDOWFZJVCDDfhlGcRIsjoYblmfMb8uSs5ZFEhXI5a0uRyAIhA6k0AE5a1kkMYG0Hd+W4qRQHG7o\/G5oDZzkzKWdxARyWP3DEAgCoQMpdkDOXNpJRCBvD3yb4qRYHA23K8+Y36YlZy\/NxC6QXxb8EmxacVMEgkDoQAYdkLMnZzCtxC6QB7s+SHEyKA43dH43tAZOcgbTSqwCGfjDQOSBPOiABR2Qs5hGYhXIBc0uoDwWlEfDLcszhm9cchbTSGwCaTamGfJAHnTAog7ImUw6sQlk\/9r7Ux6LysMNHX5Da+AjZzLpxCKQcl+WQx7Igw5Y2AE5m0mmaIFM+2NasF659SiPheXRcMvyjOGblpxNOaNJpWiB3NXxLuSBPOiAxR2QM5pUihLI59M+pzgWF4fbOfx21sRHzmoSKUogZzY+E4EgEDrgQAfkrCaRyAJ5f8T7FMeB4mi6ZXnW8I1LzmzciSSQ5SuXB3vU2AOBIBA64FAH5MzK2Y0zkQTyymevUByHisPNHH4za+IjZzfOFCyQSb9NQh7Igw443AE5w3GlYIHc3O5myuNweTTdtjxr7s1LznBcKUgg3b\/pjjyQBx3woANyluNIQQI56f2TKI8H5eFmzn0za+IiZzmO5C2Qel\/XQx7Igw541AE508UmL4EsWLYg2LHKjpTHo\/Joum151twbl5xpOdvFJC+BPNvrWeSBPOiAhx2Qs11MShXI6FmjKY6HxeFWzn0ra+QiZzxqShXINW2uQSAIhA543AE541FTqkCivjGvgwAE\/CeAQPyfMU8IgcQIIJDE0PLGEPCfAALxf8Y8IQQSI4BAEkPLG0PAfwIIxP8Z84QQSIwAAkkMLW8MAf8JIBD\/Z8wTQiAxAggkMbS8MQT8J4BA\/J8xTwiBxAggkMTQ8sYQ8J\/A\/wAD0ZVue6KhCQAAAABJRU5ErkJggg==\" alt=\"CSS Equilateral Triangle\" width=\"272\" height=\"253\" \/><\/p>\n<p>Alternatively, there&#8217;s a neater way to write the CSS class for this:<\/p>\n<pre><code>.triangle-up-equilateral {\r\n    --side-size: 20px;\r\n    border-left: var(--side-size) solid transparent;\r\n    border-right: var(--side-size) solid transparent;\r\n    border-bottom: calc(2 * var(--side-size) * 0.866) solid green;\r\n    border-top: var(--side-size) solid transparent;\r\n    display: inline-block;\r\n}<\/code><\/pre>\n<p>Using a CSS variable allows us to set the size of the equilateral triangle in only one place.<\/p>\n<h2>How To Create a Triangle Using CSS Gradients<\/h2>\n<p>Another way to draw a triangle using CSS only is by using gradients.<\/p>\n<pre class=\"snippet-code-css lang-css prettyprint prettyprinted\"><code><span class=\"pun\">.<\/span><span class=\"pln\">triangle <\/span><span class=\"pun\">{<\/span>\r\n    <span class=\"kwd\">width<\/span><span class=\"pun\">:<\/span> <span class=\"lit\">200px<\/span><span class=\"pun\">;<\/span>\r\n    <span class=\"kwd\">height<\/span><span class=\"pun\">:<\/span> <span class=\"lit\">200px<\/span><span class=\"pun\">;<\/span>\r\n    <span class=\"kwd\">background<\/span><span class=\"pun\">:<\/span><span class=\"pln\"> linear-gradient<\/span><span class=\"pun\">(<\/span><span class=\"pln\">to bottom right<\/span><span class=\"pun\">,<\/span> <span class=\"lit\">#fff<\/span> <span class=\"lit\">0%<\/span><span class=\"pun\">,<\/span> <span class=\"lit\">#fff<\/span> <span class=\"lit\">50%<\/span><span class=\"pun\">,<\/span> green <span class=\"lit\">50%<\/span><span class=\"pun\">,<\/span> <span class=\"lit\">green<\/span> <span class=\"lit\">100%<\/span><span class=\"pun\">);<\/span>\r\n<span class=\"pun\">}<\/span><\/code><\/pre>\n<p>Which renders as a right triangle:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"CSS Triangle using gradient\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS0AAAEiCAYAAACstYQ7AAAOpElEQVR4Ae3c0XbbuBJE0Xz6\/XPfhckk48SSTJFAEQ1svIwskWj0QfVZ85QfHxYCCCBQiMCPQmd1VAQQQOCDtIQAAQRKESCtUtflsAggQFoygAACpQiQVqnrclgEECAtGUAAgVIESKvUdTksAgiQlgwggEApAqRV6rocFgEESEsGEECgFAHSKnVdDosAAqQlAwggUIoAaZW6LodFAAHSkgEEEChFgLRKXZfDIoAAackAAgiUIkBapa7LYRFAgLRkAAEEShEgrVLX5bAIIEBaMoAAAqUIkFap63JYBOYi8ON\/eYXkK87F3GkQQOAkgSYs0joJz2sIIJAl8EtYpJXlrhoCCJwg8FlYpHUCoFcQQCBH4G9hkVaOvUoIIPAmgUfCIq03IXocAQQyBJ4Ji7Qy\/FVBAIE3CLwSFmm9AdKjCCAwnsB3wiKt8XegAgIIHCRwRFikdRCmxxBAYCyBo8IirbH3YHcEEDhA4B1hkdYBoB5BAIFxBN4VFmmNuws7I4DANwTOCIu0voHqZwQQGEPgrLBIa8x92BUBBF4QuCIs0noB1k8IINCfwFVhkVb\/O7EjAgg8IdBDWKT1BK6vEUCgL4FewiKtvvdiNwQQeECgp7BI6wFgXyGAQD8CvYVFWv3uxk4IIPAXgRHCIq2\/IPsTAQT6EBglLNLqcz92QQCBTwRGCou0PoH2EQEErhMYLSzSun5HdkAAgX8JJIRFWuKGAAJdCKSERVpdrssmCOxNICks0to7a7pH4DKBtLBI6\/KV2QCBfQncISzS2jdvOkfgEoG7hEVal67NywjsSeBOYZHWnpnTNQKnCdwtLNI6fXVeRGA\/AjMIi7T2y52OEThFYBZhkdap6\/MSAnsRmElYpLVX9nSLwNsEZhMWab19hV5AYB8CMwqLtPbJn04ReIvArMIirbeu0cMI7EFgZmGR1h4Z1CUChwnMLizSOnyVHkRgfQIVhEVa6+dQhwgcIlBFWKR16Do9hMDaBCoJi7TWzqLuEPiWQDVhkda3V+oBBNYlUFFYpLVuHnWGwEsCVYVFWi+v1Y8IrEmgsrBIa81M6gqBpwSqC4u0nl6tHxBYj8AKwiKt9XKpIwQeElhFWKT18Hp9icBaBFYSFmmtlU3dIPCFwGrCIq0vV+wLBNYhsKKwSGudfOoEgT8IrCos0vrjmv2BwBoEVhYWaa2RUV0g8JvA6sIird9X7QMC9QnsICzSqp9THSDwD4FdhEVaAo\/AAgR2EhZpLRBYLexNYDdhkdbeedd9cQI7Cou0iofW8fclsKuwSGvfzOu8MIGdhUVahYPr6HsS2F1YpLVn7nVdlABh\/fggraLhdez9CBDWT2GR1n7Z13FBAoT1n7BIq2CAHXkvAoT1p7BIa6\/867YYAcL6KizSKhZix92HAGE9FhZp7TMDOi1EgLCeC4u0CgXZUfcgQFivhUVae8yBLosQIKzvhUVaRcLsmOsTIKxjwiKt9WdBhwUIENZxYZFWgUA74toECOs9YZHW2vOgu8kJENb7wiKtyUPteOsSIKxzwiKtdWdCZxMTIKzzwiKtiYPtaGsSIKxrwiKtNedCV5MSIKzrwiKtScPtWOsRIKw+wiKt9WZDRxMSIKx+wiKtCQPuSGsRIKy+wiKtteZDN5MRIKz+wiKtyULuOOsQIKwxwiKtdWZEJxMRIKxxwiKtiYLuKGsQIKyxwiKtNeZEF5MQIKzxwiKtScLuGPUJEFZGWKRVf1Z0MAEBwsoJi7QmCLwj1CZAWFlhkVbteXH6mwkQVl5YpHVz6JWvS4Cw7hEWadWdGSe\/kQBh3Scs0rox+ErXJEBY9wqLtGrOjVPfRICw7hcWad0UfmXrESCsOYRFWvVmx4lvIEBY8wiLtG4YACVrESCsuYRFWrXmx2nDBAhrPmGRVngIlKtDgLDmFBZp1ZkhJw0SIKx5hUVawUFQqgYBwppbWKRVY46cMkSAsOYXFmmFhkGZ+QkQVg1hkdb8s+SEAQKEVUdYpBUYCCXmJkBYtYRFWnPPk9MNJkBY9YRFWoOHwvbzEiCsmsIirXlnyskGEiCsusIirYGDYes5CRBWbWGR1pxz5VSDCBBWfWGR1qDhsO18BAhrDWGR1nyz5UQDCBDWOsIirQEDYsu5CBDWWsIirbnmy2k6EyCs9YRFWp2HxHbzECCsNYVFWvPMmJN0JEBY6wqLtDoOiq3mIEBYawuLtOaYM6foRICw1hcWaXUaFtvcT4Cw9hAWad0\/a07QgQBh7SMs0uowMLa4lwBh7SUs0rp33lS\/SICw9hMWaV0cGq\/fR4Cw9hQWad03cypfIEBY+wqLtC4MjlfvIUBYewuLtO6ZO1VPEiAswiKtk8PjtTwBwiKsXxlIp+9HuqB69Qn8Cqv\/ElfLQHrlK6Y7VK8rAaIiqr8z0DVgBzYjrQOQPPKTwN9h9TeBtQykV75iukP1uhAgKIJ6loEuAXtjE9J6A9aujz4Lq++JrGUgvfIV0x2qd4kAMRHTdxm4FLATL5PWCWi7vPJdWP1OaC0D6ZWvmO5QvVMECImQjmbgVMAuvERaF+Ct+urRsHqO2FoG0itfMd2hem8RICIiejcDbwWsw8Ok1QHiKlu8G1bPE1zLQHrlK6Y7VO8QAQIioLMZOBSwjg+RVkeYVbc6G1bvEV3LQHrlK6Y7VO8lAeIhnqsZeBmwAT+S1gCoVba8GlbvE17LQHrlK6Y7VO8hAcIhnF4ZeBiwgV+S1kC4s27dK6z2Ib6WgfTKV0x3qN4fBIiGaHpn4I+ABf4grQDkWUr0Dqv9CLBlIL3yFdMdqvcPAYIhmFEZSI8YaaWJ31BvVFjtS4QtA+mVr5jucPN6xEIsozOQHjHSShMP1hsdVvsTYstAeuUrpjvctB6hEEoqA+kRI6008UC9VFjVIcaWgfTKV0x3uFk9IiGSdAbSI0ZaaeID66XDqh5BtgykV75iusNN6hEIgdyVgfSIkVaa+IB6d4VVXaJsGUivfMV0h4vXIw7iuDsD6REjrTTxjvXuDqv6hNkykF75iukOF61HGIQxSwbSI0ZaaeId6s0SVucgzpaB9MpXTHe4WD2iIIrZMpAeMdJKE79Qb7awOg+BtgykV75iusNF6hEEQcyagfSIkVaa+Il6s4bVuYi0ZSC98hXTHRavRwzEMHsG0iNGWmnib9SbPazOR6gtA+mVr5jusGg9QiCEKhlIjxhppYkfqFclrM5JrC0D6ZWvmO6wWD0iIIJqGUiPGGmlib+oVy2szkuwLQPpla+Y7rBIPQIggKoZSI8YaaWJP6hXNazOTbQtA+mVr5jucPJ6Bt\/gV89AesRIK038U73qYXV+wm0ZSK98xXSHk9Yz8AZ+lQykR4y00sQ\/Pj5WCas+iLdlIL3yFdMdTlbPoBv01TKQHjHSChJfLaz6IeCWgfTKV0x3OEk9A27AV81AesRIK0B81bDqi4hbBtIrXzHd4c31DLbBXj0D6REjrYHEVw+r\/gi5ZSC98hXTHd5Uz0Ab6F0ykB4x0hpAfJew6pOYWwbSK18x3WG4nkE2yLtlIDxiH6TVkfhuYdUvQbcMpFe+YrrDUD0DbIB3zUBoxH6XIa3fKM5\/2DWs+ibqloH0yldMdzi4nsE1uLtnYPCIfdmetL4gOf7F7mHVP2G3DKRXvmK6w0H1DKyBlYGfGRg0Yk+3Ja2naJ7\/IKyEJQP\/ZeD5pIz5hbTe5Cqs\/4UVCyxaBtIrXzHdYcd6htSQysDXDHQcsUNbkdYhTP6JZMP6dVgx+cnk4Ah1e4y0DqAUTgMrA88zcGCEuj5CWt\/gFNbnYcUGm5aB9MpXTHd4oZ6hNJQy8H0GLozYqVdJ6wk2Yf0+rBhh1DKQXvmK6Q5P1DOMhlEGjmfgxIhdeoW0\/sInrMfDihVWLQPpla+Y7vCNeobQEMrA+xl4Y8S6PEpa\/2IU1vfDihlmLQPpla+Y7vBAPcNn+GTgfAYOjFjXR7aXlrCeDyt22LUMpFe+YrrDF\/UMnaGTgesZeDFiQ37aVlrCej2sGGLYMpBe+YrpDh\/UM2yGTQb6ZeDBiA39ajtpCWu\/sGKJZctAeuUrpjv8VM+QGTIZ6J+BTyMW+biNtIS1f1gxxbRlIL3yFdMdfvgH\/MiFXEZmID3Sy0tr5GXZmwxkIK+QfMWglgWKVGRgfAaCI\/1PqWWlJazjw4oxxi0D6ZWvGOjQMBkmGchlIDDSf5RYTlrCmgsr1li3DKRXvuLADg2RIZKBfAYGjvTDrZeRlrDmw4o55i0D6ZWvOKBDw2N4ZOC+DAwY6ZdblpeWsN4XVuyxbxlIr3zFjh0aGkMjA\/dnoONIH9qqrLSE9f6wugN30DKQXvmKHTo0LIZFBubJQIeRfmuLctIS1nnC6i7cRctAeuUrXujQkBgSGZgvAxdG+tSrZaQlrPOF1Z24k5aB9MpXPNGh4TAcMjBvBk6M9KVXppeWsM4bVnfjbloG0itf8Y0ODYWhkIH5M\/DGSHd5dFppCev8YXVH7qhlIL3yFQ90aBgMgwzUycCBke76yHTSEtY6YXVX7qplIL3yFV90aAgMgQzUy8CLkR7y0zTSEtZ6YXVn7qxlIL3yFR90KPzCLwN1M\/BgpId+dbu0hLVuWN2du2sZSK98xU8dCr3Qy0D9DHwa6cjH26QlrPXD6g7dYctAeuUrfnx8CLuwy8A6GVheWsK6TljdpbtsGUivaEUhF3IZWC8Dy0pLWNcLqzt1py0D6RWpKNzCLQPrZmA5aQnrumF1t+62ZSC9hlYUaqGWgfUzsJS00s2ohwAC6xMY+n9a6+PTIQIIpAmQVpq4egggcIkAaV3C52UEEEgTIK00cfUQQOASAdK6hM\/LCCCQJkBaaeLqIYDAJQKkdQmflxFAIE2AtNLE1UMAgUsESOsSPi8jgECaAGmliauHAAKXCJDWJXxeRgCBNAHSShNXDwEELhEgrUv4vIwAAmkCpJUmrh4CCFwiQFqX8HkZAQTSBEgrTVw9BBC4RIC0LuHzMgIIpAmQVpq4egggcInA\/wEjXdv5hcWFZAAAAABJRU5ErkJggg==\" alt=\"CSS Triangle using gradient\" width=\"301\" height=\"290\" \/><\/p>\n<p>This basically creates a gradient fill coming from top left to bottom right and a hard stop right in the middle (50%).<\/p>\n<p>We can also make use of the less known CSS gradient type\u00a0<code>conic-gradient<\/code> like this:<\/p>\n<p>Another way to draw a triangle using CSS only is by using gradients.<\/p>\n<pre><code>.triangle-element {\r\n    width: 40px;\r\n    height: 40px;\r\n    background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);\r\n}<\/code><\/pre>\n<p>Which renders a similar right isosceles triangle as above:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"CSS Conic Gradient Triangle\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAADfCAYAAABWMA74AAAKuElEQVR4Ae3dgW4bRwxF0Xx6\/txFkCo2ZMna1XCWM+QpUNiWteTM5eONURjprw\/\/IIAAAkkEfiX11RYBBBD4ICAhQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZQACBNAIElIZeYwQQICAZGCLw67cIDQFs\/rD0NA\/AyPX\/yOf270gdz\/YlQEB9Zz9085t4vn4cKujhlgQIqOXYxy79VTpfPx+r6umOBAio49QH7vxVOM8+Hyjv0WYECKjZwEeu+0w4j14f6ePZPgQIqM+sh276SDKvXhtq6OEWBAioxZjHLvlKND99f6yzp6sTIKDqEx68309yOfq9wSN4vDABAio83NGrHRXMkfeNnsXzNQkQUM25Dt\/qiFTOvmf4UAqUI0BA5UY6fqGzYjnz\/vHTqVCJAAFVmmbAXc7I5N33BhxTiSIECKjIICOu8a5Q3nku4rxq7E+AgPafYcgN3pHI6DMhB1dkawIEtPX4Yg4\/KpKR52NuoMquBAho18kFnXtEHlHPBl1FmQ0JENCGQ4s6cpRAIupE3UmdvQgQ0F7zCjtthDSia4RdTqFtCBDQNqOKO2i0OCLrxd1SpR0IENAOUwo8Y6QsZtUKvK5SixMgoMUHFHm8WcKYUTfy3mqtS4CA1p1N6MlmSGJ2zVAAii1JgICWHEvsoWaLYmb9WBKqrUaAgFabSPB5ZsrhqtrBSJRbiAABLTSM6KNcJYgr+kSzUW8NAgS0xhzCT3GFFK7uEQ5JwXQCBJQ+gvgDXC2GK\/vF01IxkwABZdKf0PtKGWT1moBNySQCBJQEfkbbLCFk9J3BT83rCRDQ9cyndMyQQHbPKSAVvZQAAV2Ke06zbBFk9p9DVNWrCBDQVaQn9Mlc\/JV6T0Cr5EUECOgi0DParCSBzLPMYKvmNQQI6BrO4V0yF37V3uGQFZxOgICmI45vsKoAVjhXPG0VZxIgoJl0g2uvsOA7nCEYu3ITCRDQRLjRpXdY\/lXOGM1evTkECGgO1\/Cqqyz2LucIH4CCUwgQ0BSssUV3WfrVzhk7BdVmECCgGVQDa6621LudJ3AUSk0gQEAToEaV3G3ZVz1v1DzUiSdAQPFMQyquusy7nitkKIqEEyCgcKTjBXdd8tXPPT4ZFaIJEFA00cF6qy\/x7ucbHI\/HgwkQUDDQkXK7L\/cu5x+ZkWdjCRBQLM+3q+2yvFXO+fagPBhKgIBCcZ4vVmWhd7zH+Wl5IpoAAUUTPVlvx8WtdOaT4\/L2YAIEFAz0TLlKi7zzXc7MzHtjCRBQLM\/D1XZe2IpnPzw4bwwlQEChOF8Xq7i8Ve70enreEU2AgKKJvqhXZVmr3uPF+Hw7mAABBQP9qVzVpa12r59m6HuxBAgolufTatWWtPp9ng7SN0IJEFAozsfFqi9r1fs9nqZXIwkQUCTNB7WqLmeXez0YqZcCCRBQIMz7Ul2WtPo97+fq6zgCBBTH8l+l6gvZ8X7\/huuTUAIEFIrzb7GOC9rhzhOi0r4kAQVHoMMidr5jcFzalyOgwAh0XsxOdw+MTPtSBBQUgU4L6K7WJmhtPpAMIGkhf310ZBAQnfYlCGgwAh0Xz50\/hTsYn\/aPE9BABCzi5yJ2ZjEQofaPEtCbEei8cO7+Xbxvxqj9YwR0MgKW7\/vyYfKXyckoefvHh\/8IfSYFFo18XmXgTJ68l4BOZeBV+HyfoP5kwD\/HCaB1kBW5kMuZDByMVfu3EdCBCJwJnvcS1S0DB6LV\/i0E9CICtzD5SCzvZOBFvNp\/m4B+iMA7gfMMUd1n4IeItf8WAT2JwH2IfE0sIxl4ErP2LxPQgwiMBM2zRPUsAw+i1v4lArqLwLPweJ1YIjJwF7f2XxLQ\/xGICJcaJHUkA+2t8wUAAf35dfDfFgeDazPwZQdbf9peQBbv2sXD+5N3a\/P8f3kC8tOPnwATM9BdQq0F5E\/jzz+Nschj0VlCbQVk4fIWDvvv7LtKqKWALMD3BcAkn0lHCbUTkEXLXzQzeD6DbhJqJSDBfx58bNZh00lCbQRkwdZZMLN4PYsuEiovIGF\/HXaM1mTUQUKlBWSx1lwsczk+l+oSIqDEX0KziMcXsTOryhIqK6DOgXX3emKrKqGSArKA9RbQTEuuar3\/L5igkk\/lDFT7SaiUVisHz92I9ZaBShIqI6DbcHy0qB0yUEVCJQTUIXDuSKz3Gaggoa0FdD8QX1vSbhnYXULbCqhb0NyXXJ9lYGcJbSmgZ4PwuiXtmoFdJURAfhPaX8laJAM7Smg7AXX9E869\/XR3JAO7SWgrAR0ZgPdY1O4Z2ElC2wioe6jcn1jPZGAXCW0hoDPgvdeiysDfDOwgoeUFJEyEIgPvZ2B1CS0tIMF7P3jYYXfLwMoSWlJAN3A+WiIZiMnAqhJaTkACFxM4HHG8z8CKElpKQPfAfG2JZCA2A6tJiICK\/BasRY1d1Mo8V5LQMgKqPHB3I4fVMrCKhJYQ0GrDcR7C6JCBFSSULqAOg3ZHQls1A9kSShXQqkNxLsLolIFMCaUJqNOA3ZXQVs9AloQuF9Dqg3A+suiagQwJXSqgroN1b1LbJQNXS+gyAe0yAOcki+4ZuFJClwio+0Ddn9R2y8BVEiIgvwnt74SWgYcZuEJC0wW0m\/md108rMvCZgdkSmiogg\/wcJBZY7JqBmRKaJqBdYTs3UcjA9wzMktAUARng9wFigsnuGZghoXAB7Q7Z+YlCBp5nIFpC4QKKPqB6CCBQlwAB1Z2tmyGwPAECWn5EDohAXQIEVHe2bobA8gQIaPkROSACdQkQUN3ZuhkCyxMgoOVH5IAI1CVAQHVn62YILE+AgJYfkQMiUJcAAdWdrZshsDwBAlp+RA6IQF0CBFR3tm6GwPIECGj5ETkgAnUJEFDd2boZAssTIKDlR+SACNQlQEB1Z+tmCCxPgICWH5EDIlCXAAHVna2bIbA8AQJafkQOiEBdAgRUd7ZuhsDyBP4D0VSNg6TyCH4AAAAASUVORK5CYII=\" alt=\"CSS Conic Gradient Triangle\" width=\"288\" height=\"223\" \/><\/p>\n<p>This creates a triangle of height 20 pixels and gives us a a bit more control over the angle pointing up. As you see we instruct the gradient to fill the <code>div<\/code> between 135 degrees and 225 degrees (making a right angle). In a similar way we can create arrows pointing down, left or right just by changing the range of the angles.<\/p>\n<p>For some reason, this seems to create a bit of a rough edge. If you guys know of a way to improve this please let me know.<\/p>\n<p>I&#8217;ve been using triangles with various orientations to create <a href=\"https:\/\/www.coding-dude.com\/wp\/css\/css-speech-bubbles\/\">CSS speech bubbles<\/a>, read more to see how.<\/p>\n<h2>How To Create a Triangle Using CSS <code>transform<\/code> and\u00a0<code>overflow<\/code><\/h2>\n<p>If we want, we can create a triangle by adding a pseudo element to a square div, rotate it by 45 degrees and using <code>overflow:hidden<\/code> to hide the parts of the resulting triangle that fall outside our div square.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3470\" src=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/css-triangle-transform-rotate.gif\" alt=\"CSS Triangle Transform Rotate\" width=\"470\" height=\"456\" \/><\/p>\n<p>Here&#8217;s the CSS:<\/p>\n<pre><code>.triangle-element {\r\n    width: 20px;\r\n    height: 20px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    margin: 10px;\r\n}\r\n.triangle-element:after {\r\n    content: '';\r\n    background: green;\r\n    width: 142%;\r\n    height: 142%;\r\n    position: absolute;\r\n    transform: rotate(45deg) translate(-71%,0);\r\n}<\/code><\/pre>\n<p>Which will render as:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"CSS Triangle with overflow and rotate\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAACsCAYAAAAjQ91JAAAFYklEQVR4Ae3djY0UORAG0MmGNMnhsoMYiGFOLd0Ahtud\/rNdrnpIaGi223aVnz8aEOLx9E0HinTgUaROZerAE3YIynQA9jJbrVDYGSjTAdjLbLVCYWegTAdgL7PVCoWdgTIdgL3MVisUdgbKdAD2MlutUNgZKNMB2MtstUJhZ6BMB2Avs9UKhZ2BMh2AvcxWKxR2Bsp0APYyW61Q2Bko0wHYy2y1QmFnoEwHYC+z1QqFnYEyHYC9zFYrFHYGynRgOvbH18fT9zo9+PLPl2mHC3aHbVjYbNC\/\/fgGu3TPne6zoW8nTLJL9u7JHgE67KCXgQ477F2xR0n0128SvMYA3wV8NOiSHfQy0GGH\/XbsERPdawzopaBLduBvAx850SU76KWgS3bgL4NfIdElO+iloEt24E+DXynRJTvopaBLduAPg18x0SU76KWgS3bgd4NfOdElO+iloEt24N+Cz5Dokh30UtAlO\/Afgs+U6JId9E+hf\/\/x\/WUkzad\/qQR9g35L9IzQvcaAXgY67LD\/xJ450V\/vYV5jgH9WgC7ZQS8DHfbi2KskutcY0NP+qcsL95+f3tkLoq+W6C\/0sBfDXhX6Bh72QtgrQ4cd9Nev8CU+JXsB8NUT\/XWSYU+OHfQXde\/sP\/+6PON\/cwP6L+jbjyR70mQHvYUOO+h\/i0j8M5I9GXiJ\/vFphT0RdtA\/hr59BfYk2EH\/HDrsoL8XkugOyb44eIm+\/zTCvjB20PdD3+6EfVHsoB+DDjvox8Us\/IRkXwy8RD9\/2mBfCDvo56FvT8K+CHbQr0GHHfTrghYaQbIHBy\/R7ztNsAfGDvp90LeRYA+KHfR7ocMO+v2iAo8o2YOBl+j9TgvsgbCD3g\/6NjLsQbCD3hc67KD3FxZoBsk+GbxEH3caYJ+IHfRx0LeZYJ+EHfSx0GEHfby4iTNK9sHgJfo87bAPxA76POjbzLAPwg76XOiwgz5f4MAVSPbO4CX6QM1vpoK9I3bQ3+gb\/GXYO2EHfbDkHdPB3gE76DvkTbgF9puxgz5B8c4pYb8RO+g71U26DfabsIM+SfCBaWG\/ATvoB8RNvBX2i9hBn6j34NSwX8AO+kFtk2+H\/SR20CfLPTE97Cewg35CWoBHYD+IHfQAak8uAfYD2EE\/qSzIY7DvxA56ELEXlgH7DuygXxAW6FHY32AHPZDWi0uB\/RPsoF\/UFexx2D\/ADnowqTcsB\/b\/wQ76DbICDgH7H9hBD6j0piXB\/ht20G9SFXQY2P\/DDnpQoTcuC\/avjyfoN4oKPFR57KAH1nnz0kpjB\/1mTcGHK4sd9OAyOyyvJHbQO0haYMhy2EFfQGWnJZbCDnonRYsMWwY76IuI7LjMEthB7yhooaHTYwd9IY2dl5oaO+id9Sw2fFrsoC8mccByU2IHfYCcBadIhx30BRUOWnIq7KAPUrPoNGmwg76owIHLToEd9IFiFp5qeeygL6xv8NKXxg76YC2LT7csdtAXlzdh+UtiB32ClARTLocd9ATqJpWwFHbQJylJMu0y2EFPIm5iGUtgB32ikERTh8cOeiJtk0sJjR30yTqSTR8WO+jJpAUoJyR20APISLiEcNhBT6gsSEmhsIMeREXSZYTBDnpSYYHKCoEd9EAiEi9lOnbQE+sKVtp07MH6YTmJOwB74s1VWtsB2Nt+uErcAdgTb67S2g7A3vbDVeIOwJ54c5XWdgD2th+uEncA9sSbq7S2A7C3\/XCVuAOwJ95cpbUdgL3th6vEHYA98eYqre0A7G0\/XCXuAOyJN1dpbQdgb\/vhKnEHYE+8uUprOwB72w9XiTsAe+LNVVrbAdjbfrhK3AHYE2+u0toO\/At1AyqrJbsRWQAAAABJRU5ErkJggg==\" alt=\"CSS Triangle with overflow and rotate\" width=\"187\" height=\"172\" \/><\/p>\n<h2>How To Create A Triangle In CSS Using <code>clip-path<\/code><\/h2>\n<p>And here&#8217;s another way to make a CSS triangle. We can use the\u00a0<code>clip-path<\/code> property. This property works like a <a href=\"https:\/\/www.psd-dude.com\/tutorials\/resources\/clipping-mask-photoshop-basic-tutorials.aspx\">clipping mask in Photoshop<\/a>. Basically you can show only parts of an HTML element.<\/p>\n<p><code>clip-path<\/code> accepts a number of value types from reference to SVG files to an inline polygon definition. When talking about SVG clip paths I do recommend reading <a href=\"https:\/\/www.sarasoueidan.com\/blog\/css-svg-clipping\/\">Sara Soueidan&#8217;s blog<\/a> as she is a true master in that area imho.<\/p>\n<p>Let&#8217;s see how that works to create a triangle:<\/p>\n<p>Here&#8217;s the CSS:<\/p>\n<pre><code>.triangle-element {\r\n    width: 40px;\r\n    height: 40px;\r\n    background: green;\r\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n}<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"CSS Create Triangle with clip-path\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAASMAAAEdCAYAAABHUAHwAAAQp0lEQVR4Ae3bgW3kOBJG4Ylu47pcLorN5XLpw8xOzZq221arKLFIfgYWsrtFkfqr6uFhgP3x8CMBCUigQAI\/CpzBESQgAQk8wEgTSEACJRIAoxJlcAgJSACM9IAEJFAiATAqUQaHkIAEwEgPSEACJRIAoxJlcAgJSACM9IAEJFAiATAqUQaHkIAEwEgPSEACJRIAoxJlcAgJSACM9IAEJFAiATAqUQaHkIAEwEgPSEACJRIAoxJlcAgJSACM9IAEJFAiATAqUQaHkIAEwEgPSEACJRIAoxJlqH2Iv\/\/39+Pnf34kcGUCYHRluos8+6\/\/\/vX4+Z8fCVyZABhdme4Cz\/5pRD\/+8+PXf+xogYIWfgUwKlycCkf7aUQBI3ZUoSLrngGM1q1t+s3eWlEAiR2lY\/WAJwmA0ZNgfPz49e9EAaG4siOdcVUCYHRVspM\/9zMrCiCxo8mLW\/T4YFS0MKOP9fbfigJCcWVHo6uz5v5gtGZdU2\/1lRUFkNhRKmKLP0kAjD4JZfePvrKigBE72r1L+r8\/GPXPdOonHrGiABI7mrrU5Q4PRuVKMvZAR6woYMSOxtZqtd3BaLWKJt7nFSsKILGjROCWNgmAURPH3n+8YkUBI3a0d8\/0fHsw6pnmxM86Y0UBJHY0ceELHR2MChVj5FHOWFHAiB2NrNw6e4PROrU8\/SYZKwogsaPT8Vv4OwEw0gqf\/j9oAZmjV3akkbIJgFE2wcnX97CiABY7mrwZBh8fjAYXYPT2mX8rCgjFlR2Nrubc+4PR3PVLnb6nFQWQ2FGqJFsvBqONy9\/TigJG7Gjjhkq+OhglA5x1+RVWFEBiR7N2xdhzg9HY\/IftfoUVBYzY0bCyTr0xGE1dvnOHv9KKAkjs6Fxtdl4FRhtW\/0orChixow0bK\/nKYJQMcLbld1hRAIkdzdYdY88LRmPzv333O6woYMSObi\/v1BuC0dTle+3wd1pRAIkdvVajne8Go42qf6cVBYzY0UYNlnxVMEoGOMvyEVYUQGJHs3TJ2HOC0dj8b9t9hBUFjNjRbWWeeiMwmrp8xw4\/0ooCSOzoWK12vguMNqj+SCsKGLGjDRot+YpglAyw+vIKVhRAYkfVu2Xs+cBobP6X717BigJG7Ojyck+9ARhNXb6vD1\/JigJI7Ojrmu38LRgtXP1KVhQwYkcLN1zy1cAoGWDV5RWtKIDEjqp2zdhzgdHY\/C\/bvaIVBYzY0WVln\/rBYDR1+T4\/fGUrCiCxo89rt\/OnYLRg9StbUcCIHS3YeMlXAqNkgNWWz2BFASR2VK17xp4HjMbm3333GawoYMSOupd\/6geC0dTlaw8\/kxUFkNhRW8Od\/wKjhao\/kxUFjNjRQg2YfBUwSgZYZfmMVhRAYkdVumjsOcBobP7ddp\/RigJG7KhbG0z9IDCaunz\/HH5mKwogsaMFGjH5CmCUDLDC8pmtKGDEjip00tgzgNHY\/NO7r2BFASR2lG6HqR8ARlOX7\/FYwYoCRuxo8mZMHh+MkgGOXL6SFQWQ2NHIjhq7NxiNzT+1+0pWFDBiR6mWmHoxGE1avhWtKIDEjiZtyuSxwSgZ4KjlK1pRwIgdjeqqsfuC0dj8T+2+shUFkNjRqdaYehEYTVi+la0oYMSOJmzM5JHBKBng3ct3sKIAEju6u7vG7gdGY\/N\/efcdrChgxI5ebo+pF4DRROXbyYoCSOxoogZNHhWMkgHeuXwnKwoYsaM7O2zsXmA0Nv\/Du+9oRQEkdnS4Taa+EYwmKd+OVhQwYkeTNGnymGCUDPCO5TtbUQCJHd3RaWP3AKOx+R\/afWcrChixo0OtMvVNYFS8fKzoxyOAxI6KN2vyeGCUDPDq5azoXxixo6u7bezzwWhs\/l\/uzor+BRE7+rJVlvgSjAqXkRV9hBE7KtywyaOBUTLAq5azoo8gYkdXdVuN54JRjTp8OAUreg4jdvShXZb4AIwKlpEVPQcROyrYsJ2OBEadguz5GFb0PYzYUc+Oq\/EsMKpRhz+nYEXfg4gd\/WmXpX4Bo2LlZEXHYcSOijVv8jhglAyw53JWdBxE7Khn59V4FhjVqMOvU7Ci12HEjgo1cPIoYJQMsNdyVvQ6iNhRr+6r8RwwqlGHBys6DyN2VKSJk8cAo2SAPZazovMgYkc9OrDGM8CoQB1YUR5G7KhAIyePAEbJALPLWVEeROwo24U11oPR4Dqwon4wYkeDmzm5PRglA8wsZ0X9QMSOMp1YYy0YDawDK+oPI3Y0sKGTW4NRMsCzy1lRfxCxo7PdWGMdGA2qAyu6DkbsaFBTJ7cFo2SAZ5azoutAxI7OdGSNNWA0oA6s6HoYsaMBjZ3cEoySAb66nBVdDyJ29GpX1rgfjG6uAyu6D0bs6ObmTm4HRskAX1nOiu4DETt6pTNr3AtGN9aBFd0PI3Z0Y4MntwKjZIBHl7Oi+0HEjo52Z437wOimOrCicTBiRzc1eXIbMEoGeGQ5KxoHInZ0pENr3ANGN9SBFY2HETu6odGTW4BRMsDvlrOi8SBiR991aY3vwejiOrCiOjBiRxc3e\/LxYJQM8KvlrKgOiNjRV51a4zswurAOrKgejNjRhQ2ffDQYJQN8tpwV1QMRO3rWrTU+B6OL6sCK6sKIHV3U9MnHglEywM+Ws6K6IGJHn3Vsjc\/A6II6sKL6MGJHFzR+8pFglAzw\/XJWVB9E7Oh919b4G4w614EVzQMjdtS5+ZOPA6NkgG+Xs6J5QMSO3nZujd\/BqGMdWNF8MGJHHQcg+SgwSgYYy1nRfCBiR9G9Na5g1KkOrGheGLGjTkOQfAwYJQP8uZwVzQsidtRhADo9Aow6BMmK5ocRO+owCMlHgFEyQFY0P4jYUXIIOi0Ho2SQrGgdGLGj5DAkl4NRIkBWtA6I2FFiEDotBaNEkKxoPRixo8RAJJeC0ckAWdF6IGJHJ4eh0zIwOhkkK1oXRuzo5FAkl4HRiQBZ0bogYkcnBqLTEjA6ESQrWh9G7OjEYCSXgNGLAbKi9UHEjl4cik63g9GLQbKifWDEjl4cjuTtYPRCgKxoHxCxoxcGo9OtYPRCkKxoPxixoxcGJHkrGB0MkBXtByJ2dHA4Ot0GRgeDZEX7wogdHRyS5G1gdCBAVrQviNjRgQHpdAsYHQiSFYEROzowKMlbwOibAFkRELGjb4ak09dg9E2QrAiMAkbs6JthSX4NRl8EyIqAKEAU15894eeaBMDoi1xZERgFhOLKjr4YmORXYPQkQFYERAGg91d29GRokh+D0ZMAWREYvYdQ\/M2OngxN8mMw+iRAVgREAZ5nV3b0yeAkPwKjTwJkRWD0DELxOTv6ZHCSH4HRuwBZERAFcL67sqN3w5P8E4zeBciKwOg7CMX37Ojd8CT\/BKM3AbIiIArQHL2yozcDlPwVjN4EyIrA6CiE4j529GaAkr+C0e8AWREQBWBevbKjJIV+Lwej30GwIjB6FUJxPzsCoz4JPB4PVgREAZazV3aUH0dm9Hg8WBEYnYVQrGNHYJROgBUBUQAle2VHuXHc3oxYERhlIRTr2REYnU6AFQFRgKTXlR2dHsfH1mbEisCoF4TiOewIjF5OgBUBUQCk95UdvTyOvxZsa0asCIx6Qyiex47A6HACrAiIAhxXXdnR4XH8c+OWZsSKwOgqCMVz2dEfxhz+ZTsYsSIgCmBcfWVHhzn068btYMSKwOhqCMXz2REYPU2AFQFRgOKuKzt6Oo4fvtjKjFgRGN0FodiHHX1gztMPtoERKwKiAMTdV3b0lD\/NF9vAiBWB0d0Qiv3YUcOcp39sASNWBEQBhlFXdvSUQX++2AJGrAiMRkEo9mVHf5jz9JflYcSKgCiAMPrKjp5y6NcXy8OIFYHRaAjF\/uxoYxixIiAKEFS5sqPnQFrajFgRGFWBUJyDHW0II1YERAGAald29DmQljUjVgRG1SAU52FHG8GIFQFRDH7VKzv6CKQlzYgVgVFVCMW52NEGMGJFQBQDX\/3KjlogLWdGrAiMqkMozseOFoYRKwKiGPRZruzoXyAtZUasCIxmgVCckx0tCCNWBEQx4LNd2dE\/QFrGjFgRGM0GoTgvO1oIRqwIiGKwZ72yo8djCTNiRWA0K4Ti3OxoARixIiCKgZ79ursdTW9GrAiMZodQnH93O5oaRqwIiGKQV7nubEdTw4gVgdEqEIr32NmOpoURKwKiGODVrrva0bQwYkVgtBqE4n12taMpYcSKgCgGd9XrjnY0JYxYERitCqF4rx3taDoYsSIgioFd\/bqbHU0HI1YERqtDKN5vNzuaCkasCIhiUHe57mRHU8GIFYHRLhCK99zJjqaBESsCohjQ3a672NE0MGJFYLQbhOJ9d7GjKWDEioAoBnPX6w52NAWMWBEY7QqheO8d7Kg8jFgREMVA7n5d3Y7Kw4gVgdHuEIr3X92OSsOIFQFRDKLrP72wsh2VhhErAiMQantgZTsqCyNW1DahoZRH9MCqdlQWRqzI8MXwuba9sKodlYQRK2qbzzDK430PrGhHJWHEigzf++Hzd9sTK9pRORixorbpDKE8nvXAanZUDkasyPA9Gz6ft72xmh2VghErapvN8Mnjux5YyY5KwYgVGb7vhs\/3bY+sZEdlYMSK2iYzdPI42gOr2FEZGLEiw3d0+NzX9soqdlQCRqyobS7DJo9Xe2AFOyoBI1Zk+F4dPve3PbOCHQ2HEStqm8qQyeNsD8xuR8NhxIoM39nhs67tndntaCiMWFHbTIZLHtkemNmOhsKIFRm+7PBZ3\/bQzHY0DEasqG0iQyWPXj0wqx0NgxErMny9hs9z2l6a1Y6GwIgVtc1jmOTRuwdmtKMhMGJFhq\/38Hle21Mz2tHtMGJFbdMYInlc1QOz2dHtMGJFhu+q4fPctrdms6NbYcSK2mYxPPK4ugdmsqNbYcSKDN\/Vw+f5bY\/NZEe3wYgVtU1iaORxVw\/MYke3wYgVGb67hs8+ba\/NYke3wIgVtc1hWORxdw\/MYEe3wIgVGb67h89+bc\/NYEeXw4gVtU1hSOQxqgeq29HlMGJFhm\/U8Nm37b3qdnQpjFhR2wyGQx6je6CyHV0KI1Zk+EYPn\/3bHqxsR5fBiBW1TWAo5FGlB6ra0WUwYkWGr8rwOUfbi1Xt6BIYsaK2+IZBHtV6oKIdXQIjVmT4qg2f87Q9WdGOusOIFbVFNwTyqNoD1eyoO4xYkeGrOnzO1fZmNTvqCiNW1BZb88ujeg9UsqOuMGJFhq\/68Dlf26OV7KgbjFhRW2RNL49ZeqCKHXWDESsyfLMMn3O2vVrFjrrAiBW1xdXs8pitByrYURcYsSLDN9vwOW\/bsxXsKA0jVtQWVZPLY9YeGG1HaRixIsM36\/A5d9u7o+0oBSNW1BZTc8tj9h4YaUcpGLEiwzf78Dl\/28Mj7eg0jFhRW0RNLY9VemCUHZ2GESsyfKsMn\/doe3mUHZ2CEStqi6eZ5bFaD4ywo1MwYkWGb7Xh8z5tT4+wo1MweviRgAQk0DkBMOocqMdJQALnEgCjc7lZJQEJdE4AjDoH6nESkMC5BMDoXG5WSUACnRMAo86BepwEJHAuATA6l5tVEpBA5wTAqHOgHicBCZxLAIzO5WaVBCTQOQEw6hyox0lAAucSAKNzuVklAQl0TgCMOgfqcRKQwLkEwOhcblZJQAKdEwCjzoF6nAQkcC4BMDqXm1USkEDnBMCoc6AeJwEJnEvg\/+K4RzCAkr\/kAAAAAElFTkSuQmCC\" alt=\"CSS Create Triangle with clip-path\" width=\"291\" height=\"285\" \/><\/p>\n<p>That&#8217;s is?!?!<\/p>\n<p>Yes, that is IT. We create the triangle by defining it as a polygon with 3 corners. This code will create an isosceles triangle with a basis of 40 pixels and a height of 40 pixels, but you can easily imagine how to change it.<\/p>\n<p>I think this is by far the method that allows the most control.<\/p>\n<p>Once you\u2019ve mastered basic CSS shapes like triangles, you might want to explore more complex geometry. For more intricate paths that are difficult to code manually, a <a href=\"https:\/\/www.coding-dude.com\/wp\/spiral\/\">spiral maker<\/a> is a great way to generate the necessary coordinates or SVG code.<\/p>\n<h2>Conclusion<\/h2>\n<p>There are a lot of uses for triangles. From arrows to map pins, from menu markers to chart elements.<\/p>\n<p>Now you know how to create a triangle with CSS.<\/p>\n<p>If you liked this tutorial, make sure to check out our Complete How-To Guide for creating and using <a href=\"https:\/\/www.coding-dude.com\/wp\/css\/css-circle-image\/\">CSS Circle Images<\/a> or see how to create a CSS only <a href=\"https:\/\/www.coding-dude.com\/wp\/html5\/bar-chart-html\/\">bar chart in HTML<\/a>.<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Probably the easiest way to add a triangle in a web page is to simply draw it in an image and add the image to the web page. There are many secrets to drawing the perfect triangle and you can read how to do that in Photoshop in this article: Create A Triangle in Photoshop [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3464,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149],"tags":[352,353,348,351],"class_list":["post-3453","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css-trick","tag-gradient","tag-svg","tag-triangle"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>5 Ways To Create A Triangle With CSS - Coding Dude<\/title>\n<meta name=\"description\" content=\"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.\" \/>\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.coding-dude.com\/wp\/css\/create-a-triangle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Ways To Create A Triangle With CSS - Coding Dude\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/\" \/>\n<meta property=\"og:site_name\" content=\"Coding Dude\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-01T14:05:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T15:54:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Negoita\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingdudecom\" \/>\n<meta name=\"twitter:site\" content=\"@codingdudecom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Negoita\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/\"},\"author\":{\"name\":\"John Negoita\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/person\\\/29b7100b9ec7bb332359bd9fcba98370\"},\"headline\":\"5 Ways To Create A Triangle With CSS\",\"datePublished\":\"2020-06-01T14:05:05+00:00\",\"dateModified\":\"2026-03-11T15:54:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/\"},\"wordCount\":1015,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/create-a-triangle-css.jpg\",\"keywords\":[\"css trick\",\"gradient\",\"svg\",\"triangle\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/\",\"name\":\"5 Ways To Create A Triangle With CSS - Coding Dude\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/create-a-triangle-css.jpg\",\"datePublished\":\"2020-06-01T14:05:05+00:00\",\"dateModified\":\"2026-03-11T15:54:42+00:00\",\"description\":\"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/create-a-triangle-css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/create-a-triangle-css.jpg\",\"width\":560,\"height\":512,\"caption\":\"Create A Triangle In CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/create-a-triangle\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Ways To Create A Triangle With CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\",\"name\":\"Coding Dude\",\"description\":\"Coding tutorials, tips and tricks\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\",\"name\":\"Coding Dude\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/codingdude-logo-wide.jpg\",\"contentUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/codingdude-logo-wide.jpg\",\"width\":226,\"height\":60,\"caption\":\"Coding Dude\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/codingdudecom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/person\\\/29b7100b9ec7bb332359bd9fcba98370\",\"name\":\"John Negoita\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"caption\":\"John Negoita\"},\"description\":\"I'm a Java programmer, been into programming since 1999 and having tons of fun with it.\",\"sameAs\":[\"http:\\\/\\\/www.coding-dude.com\",\"https:\\\/\\\/x.com\\\/codingdudecom\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Ways To Create A Triangle With CSS - Coding Dude","description":"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.","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.coding-dude.com\/wp\/css\/create-a-triangle\/","og_locale":"en_US","og_type":"article","og_title":"5 Ways To Create A Triangle With CSS - Coding Dude","og_description":"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.","og_url":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/","og_site_name":"Coding Dude","article_published_time":"2020-06-01T14:05:05+00:00","article_modified_time":"2026-03-11T15:54:42+00:00","og_image":[{"width":560,"height":512,"url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","type":"image\/jpeg"}],"author":"John Negoita","twitter_card":"summary_large_image","twitter_creator":"@codingdudecom","twitter_site":"@codingdudecom","twitter_misc":{"Written by":"John Negoita","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#article","isPartOf":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/"},"author":{"name":"John Negoita","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/person\/29b7100b9ec7bb332359bd9fcba98370"},"headline":"5 Ways To Create A Triangle With CSS","datePublished":"2020-06-01T14:05:05+00:00","dateModified":"2026-03-11T15:54:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/"},"wordCount":1015,"commentCount":1,"publisher":{"@id":"https:\/\/www.coding-dude.com\/wp\/#organization"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","keywords":["css trick","gradient","svg","triangle"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/","url":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/","name":"5 Ways To Create A Triangle With CSS - Coding Dude","isPartOf":{"@id":"https:\/\/www.coding-dude.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#primaryimage"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","datePublished":"2020-06-01T14:05:05+00:00","dateModified":"2026-03-11T15:54:42+00:00","description":"In this tutorial I will show you 5 different methods to create a triangle with CSS. Create a triangle that is right, isosceles or equilateral with CSS only.","breadcrumb":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#primaryimage","url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","contentUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","width":560,"height":512,"caption":"Create A Triangle In CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.coding-dude.com\/wp\/css\/create-a-triangle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.coding-dude.com\/wp\/"},{"@type":"ListItem","position":2,"name":"5 Ways To Create A Triangle With CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.coding-dude.com\/wp\/#website","url":"https:\/\/www.coding-dude.com\/wp\/","name":"Coding Dude","description":"Coding tutorials, tips and tricks","publisher":{"@id":"https:\/\/www.coding-dude.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.coding-dude.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.coding-dude.com\/wp\/#organization","name":"Coding Dude","url":"https:\/\/www.coding-dude.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2018\/05\/codingdude-logo-wide.jpg","contentUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2018\/05\/codingdude-logo-wide.jpg","width":226,"height":60,"caption":"Coding Dude"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/codingdudecom"]},{"@type":"Person","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/person\/29b7100b9ec7bb332359bd9fcba98370","name":"John Negoita","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","caption":"John Negoita"},"description":"I'm a Java programmer, been into programming since 1999 and having tons of fun with it.","sameAs":["http:\/\/www.coding-dude.com","https:\/\/x.com\/codingdudecom"]}]}},"jetpack_featured_media_url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/06\/create-a-triangle-css.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/comments?post=3453"}],"version-history":[{"count":19,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3453\/revisions"}],"predecessor-version":[{"id":4906,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3453\/revisions\/4906"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/media\/3464"}],"wp:attachment":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/media?parent=3453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/categories?post=3453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/tags?post=3453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}