{"id":254474,"date":"2017-05-04T06:54:53","date_gmt":"2017-05-04T13:54:53","guid":{"rendered":"http:\/\/css-tricks.com\/?post_type=chapters&#038;p=254474"},"modified":"2020-03-15T13:52:47","modified_gmt":"2020-03-15T20:52:47","slug":"how-to-make-a-triangle","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/how-to-make-a-triangle\/","title":{"rendered":"Border Triangles"},"content":{"rendered":"\n<p>Imagine an element with a thick border:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.triangle {\n  width: 200px;\n  height: 200px;\n  border: 10px solid black;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-254573\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/triangle-1.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Now imagine all four borders have different colors:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.triangle {\n  ...\n\n  border-left-color:    red;\n  border-right-color:   yellowgreen;\n  border-top-color:     orange;\n  border-bottom-color:  rebeccapurple;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-254574\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/triangle-2.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Notice how the borders meet each other at angles?<\/p>\n\n\n\n<p>Look what happens when we collapse the element to zero width and height:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.triangle {\n  ...\n\n  width: 0;\n  height: 0;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-254578\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/triangle-3-1.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>If three of those borders were <code>transparent<\/code>, we&#8217;d have a triangle!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.triangle {\n  ...\n\n  border-left-color: transparent;\n  border-right-color: transparent;\n  border-top-color: transparent;\n  border-bottom-color: rebeccapurple;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-254576\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/triangle-4.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Nice.<\/p>\n\n\n\n<p>This could be useful on something like a pointing bubble of text. In that case, you could add the triangle to another element via a pseudo-element. Here&#8217;s a <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/OmORqR\/\" rel=\"noopener\">complete example<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-254577\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/triangle-5.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>There are triangular unicode characters. You could draw a triangle in SVG. But there is another way to draw a triangle on the web, involving nothing but the border property and a little CSS trickery.<\/p>\n","protected":false},"featured_media":0,"parent":254473,"menu_order":5,"template":"","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},"acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/254474"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/chapters"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/254473"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=254474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}