You can make them with a single div. It’s nice to have classes for each direction possibility. <\/p>\n
<div class=\"arrow-up\"><\/div>\r\n<div class=\"arrow-down\"><\/div>\r\n<div class=\"arrow-left\"><\/div>\r\n<div class=\"arrow-right\"><\/div><\/code><\/pre>\nCSS<\/h4>\n
The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.<\/p>\n
.arrow-up {\r\n width: 0; \r\n height: 0; \r\n border-left: 5px solid transparent;\r\n border-right: 5px solid transparent;\r\n \r\n border-bottom: 5px solid black;\r\n}\r\n\r\n.arrow-down {\r\n width: 0; \r\n height: 0; \r\n border-left: 20px solid transparent;\r\n border-right: 20px solid transparent;\r\n \r\n border-top: 20px solid #f00;\r\n}\r\n\r\n.arrow-right {\r\n width: 0; \r\n height: 0; \r\n border-top: 60px solid transparent;\r\n border-bottom: 60px solid transparent;\r\n \r\n border-left: 60px solid green;\r\n}\r\n\r\n.arrow-left {\r\n width: 0; \r\n height: 0; \r\n border-top: 10px solid transparent;\r\n border-bottom: 10px solid transparent; \r\n \r\n border-right:10px solid blue; \r\n}<\/code><\/pre>\nDemo<\/h4>\n
See the Pen Animation to Explain CSS Triangles<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\nExamples<\/h4>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\nDave Everitt writes in:<\/p>\n
For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
HTML You can make them with a single div. It’s nice to have classes for each direction possibility. <div class=”arrow-up”><\/div> <div class=”arrow-down”><\/div> <div class=”arrow-left”><\/div> <div class=”arrow-right”><\/div> CSS The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":192882,"url":"https:\/\/css-tricks.com\/snippets\/sass\/css-triangle-mixin\/","url_meta":{"origin":4354,"position":0},"title":"CSS Triangle Mixin","date":"January 11, 2015","format":false,"excerpt":"There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it. If, like me, you never quite remember how it works, be sure we can use Sass to help us. \/\/\/\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-inline\/","url_meta":{"origin":4354,"position":1},"title":"border-inline","date":"September 2, 2021","format":false,"excerpt":"border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element's borders in the inline (left and right) direction. .element { border-inline: 5px solid red; writing-mode: horizontal-tb; } border-inline is the logical equivalent to physical properties including border-left and border-right (or\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350928,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-block\/","url_meta":{"origin":4354,"position":2},"title":"border-block","date":"September 2, 2021","format":false,"excerpt":"border-block is a CSS logical shorthand property that combines border-block-color, border-block-style, and border-block-width into a single declaration. .element { border-block: 5px solid red; writing-mode: horizontal-tb; } border-block is the logical equivalent to physical properties including border-top and border-bottom (or border-right and border-left, depending on the writing-mode). It is defined in\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355486,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-border\/","url_meta":{"origin":4354,"position":3},"title":"mask-border","date":"November 3, 2021","format":false,"excerpt":"The mask-border CSS property sets a border image to an element\u2019s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_A4675D262DA10437B039C41DDD674601F72A8FFCAB2801EE4264E0D51AB8C554_1634664377390_slice.png?fit=1000%2C1000&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":4354,"position":4},"title":"border-image-width","date":"January 12, 2023","format":false,"excerpt":"The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS border-image-source property. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; } CodePen Embed Fallback The border-image-width property is defined in the CSS Backgrounds and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":194425,"url":"https:\/\/css-tricks.com\/snippets\/sass\/placing-items-circle\/","url_meta":{"origin":4354,"position":5},"title":"Placing Items on a Circle","date":"January 28, 2015","format":false,"excerpt":"It can be quite challenging to place items on a circle with CSS. Usually, we end up relying on JavaScript because some plugins do it all right away. However more often than not there is no good reason to do it in JavaScript rather than CSS. This is presentational purpose,\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4354"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4354"}],"version-history":[{"count":19,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4354\/revisions"}],"predecessor-version":[{"id":246018,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4354\/revisions\/246018"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4354"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}