{"id":388,"date":"2019-08-03T14:13:11","date_gmt":"2019-08-03T14:13:11","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=388"},"modified":"2019-08-03T19:11:24","modified_gmt":"2019-08-03T19:11:24","slug":"css-triangles","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/css-triangles\/","title":{"rendered":"CSS triangles"},"content":{"rendered":"

What:<\/strong> Making triangles using CSS<\/p>\n

How:<\/strong> The basic idea is a box with width and height set to zero.
\nYou set the four borders, three of which you make transparent.
\nBorder-width then decides the size of the triangle and giving the different sides different border-widths changes the shape of the triangle.<\/p>\n

Thoughts:<\/strong> You don’t have to set the border-color to transparent. You have to make the sides you don’t want to see invisible. For CSSBattle 7 target 34<\/a> I set the border-color for the sides I didn’t want to see to the background-color of the container, because a hex color value takes less characters than the word transparent<\/em>.
\nIf you’re using it on a live site though, setting it to transparent is probably better. If the background-color of the container changes you won’t have to change the border-color and the container might not have a solid color as a background, it might have a photo or a pattern as a background.<\/p>\n

Codepen: CSS triangles<\/h3>\n

[codepen_embed height=”362″ theme_id=”0″ slug_hash=”WVZMYw” default_tab=”result” user=”blindeman”]See the Pen <a href=’https:\/\/codepen.io\/blindeman\/pen\/WVZMYw\/’>CSS triangles<\/a> by Naomi Blindeman (<a href=’https:\/\/codepen.io\/blindeman’>@blindeman<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed]<\/p>\n

 <\/p>\n

Read more:<\/strong> @CSS-TRICKS by Chris Coyier<\/a><\/p>\n

\n
\n
Photo by Duy Hoang<\/a> on Unsplash<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

What: Making triangles using CSS How: The basic idea is a box with width and height set to zero. You set the four borders, three of which you make transparent. Border-width then decides the size of the triangle and giving the different sides different border-widths changes the shape of the triangle.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[25,17,28,27],"class_list":["post-388","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-codepen","tag-css","tag-cssbattle","tag-triangles","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=388"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/388\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}