{"id":2197,"date":"2016-07-31T08:56:40","date_gmt":"2016-07-31T08:56:40","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2197"},"modified":"2023-11-07T02:11:54","modified_gmt":"2023-11-07T02:11:54","slug":"how-to-create-css-triangles-4-demos-in-all-directions","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/","title":{"rendered":"How to create CSS Triangles: 4 Demos in all Directions"},"content":{"rendered":"

Creating pure CSS triangles<\/strong><\/h3>\n

In this tutorial, I am going to show how you may create CSS-based triangles in your web projects. You may use these for different purposes including showing the direction of content or for the geometrical reason.<\/p>\n

The process is quite simple for creating the triangle which just requires using the CSS border<\/a> properties with appropriate property values.<\/p>\n

See the following section for seeing the live demos of triangles in all directions.<\/p>\n

A demo of creating right direction triangle CSS<\/strong><\/h3>\n

For creating the right-direction triangle, simply use a div element and assign it a CSS class that contains border properties. Amazingly, you need to specify all borders except the right one separately while using this method. Have a look at the demo and code:<\/p>\n

\"CSS<\/p>\n

The CSS:<\/strong><\/p>\n

.demo-triangle-css {\r\n\r\n\u00a0 border-left: 100px solid #408080;\r\n\r\n\u00a0 border-top: 50px solid transparent;\r\n\r\n\u00a0 border-bottom: 50px solid transparent;\r\n\r\n}<\/pre>\n
The markup:<\/strong><\/p>\n
<div class=\"demo-triangle-css\"><\/div><\/pre>\n
Note:<\/strong> You may also use <p> tag instead of <div>.<\/p>\n
An example with left direction triangle<\/strong><\/h3>\n
Opposite to the above example, this time, the border-right property is used for creating a triangle in which the arrow is directed to the left. Have a look:<\/p>\n
\"CSS<\/p>\n
<\/h6>\n
CSS code:<\/p>\n
.demo-triangle-css {\r\n\r\n\u00a0 border-top: 100px solid transparent;\r\n\r\n\u00a0 border-bottom: 100px solid transparent;\r\n\r\n\u00a0 border-right: 200px solid #408080;\r\n\r\n\u00a0 width: 0px;\r\n\r\n\u00a0 height: 0px;\r\n\r\n}<\/pre>\n
A demo with up direction<\/strong><\/h3>\n
Now, the border-top<\/em> is not used for creating the triangle with up-direction. The border-left and border-right are kept transparent while the border-bottom<\/strong> is given the desired color:<\/p>\n
\"CSS<\/p>\n
The CSS:<\/strong><\/p>\n
.demo-triangle-css {\r\n\r\n\u00a0 border-left: 100px solid transparent;\r\n\r\n\u00a0 border-right: 100px solid transparent;\r\n\r\n\u00a0 border-bottom: 200px solid #400000;\r\n\r\n\u00a0 width: 0px;\r\n\r\n\u00a0 height: 0px;\r\n\r\n}<\/pre>\n
A demo with down triangle<\/strong><\/h3>\n
Just like the right and left directions, use the border-top for the down triangle. Have a look:<\/p>\n
\"CSS<\/p>\n
This is how the CSS is used in the example:<\/p>\n
.demo-triangle-css {\r\n\r\n\u00a0 border-left: 100px solid transparent;\r\n\r\n\u00a0 border-right: 100px solid transparent;\r\n\r\n\u00a0 border-top: 200px solid #400000;\r\n\r\n\u00a0 width: 0px;\r\n\r\n\u00a0 height: 0px;\r\n\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Creating pure CSS triangles In this tutorial, I am going to show how you may create CSS-based triangles in your web projects. You may use these for different purposes including showing the direction of content or for the geometrical reason. The process is quite simple for creating the triangle which just requires using the CSS … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2200,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"yoast_head":"\nHow to create CSS Triangles: 4 Demos in all Directions<\/title>\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.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create CSS Triangles: 4 Demos in all Directions\" \/>\n<meta property=\"og:description\" content=\"Creating pure CSS triangles In this tutorial, I am going to show how you may create CSS-based triangles in your web projects. You may use these for different purposes including showing the direction of content or for the geometrical reason. The process is quite simple for creating the triangle which just requires using the CSS ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-31T08:56:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T02:11:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/19.0_3-CSS-triangle-up.png\" \/>\n\t<meta property=\"og:image:width\" content=\"219\" \/>\n\t<meta property=\"og:image:height\" content=\"225\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/\",\"url\":\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/\",\"name\":\"How to create CSS Triangles: 4 Demos in all Directions\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-31T08:56:40+00:00\",\"dateModified\":\"2023-11-07T02:11:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create CSS Triangles: 4 Demos in all Directions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create CSS Triangles: 4 Demos in all Directions","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.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/","og_locale":"en_US","og_type":"article","og_title":"How to create CSS Triangles: 4 Demos in all Directions","og_description":"Creating pure CSS triangles In this tutorial, I am going to show how you may create CSS-based triangles in your web projects. You may use these for different purposes including showing the direction of content or for the geometrical reason. The process is quite simple for creating the triangle which just requires using the CSS ... Read more","og_url":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/","article_published_time":"2016-07-31T08:56:40+00:00","article_modified_time":"2023-11-07T02:11:54+00:00","og_image":[{"width":219,"height":225,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/19.0_3-CSS-triangle-up.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/","url":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/","name":"How to create CSS Triangles: 4 Demos in all Directions","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-31T08:56:40+00:00","dateModified":"2023-11-07T02:11:54+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/how-to-create-css-triangles-4-demos-in-all-directions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"How to create CSS Triangles: 4 Demos in all Directions"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2197"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2197"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2197\/revisions"}],"predecessor-version":[{"id":11176,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2197\/revisions\/11176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2200"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}