{"id":1650,"date":"2013-12-15T18:07:00","date_gmt":"2013-12-16T02:07:00","guid":{"rendered":"http:\/\/www.virendrachandak.com\/techtalk\/\/?p=1650"},"modified":"2015-02-11T23:01:22","modified_gmt":"2015-02-12T07:01:22","slug":"css-triangles-arrows-designs","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","title":{"rendered":"How to create Triangles using CSS"},"content":{"rendered":"<p>Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will see how to easily we can create triangles and a few other designs using CSS.<\/p>\n<p>The borders in a browser are drawn at angles, so we can use this technique to create triangle. To create a triangle we will set the border-width value for the side in which we need the arrow. Then, we will set that side&#8217;s border color and make all other sides transparent. Also, we set the width and height of the element to 0.<br \/>\n<!--more--><br \/>\nHere is an example of how we will create an up arrow:<\/p>\n<style type=\"text\/css\">\n.vc-arrow-up {\n\tborder-left: 15px solid transparent;\n\tborder-right: 15px solid transparent;\n\tborder-bottom: 15px solid #666666;\n\theight: 0;\n\twidth: 0;\n}\n.vc-arrow-down {\n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\tborder-top: 10px solid #009900;\n\theight: 0;\n\twidth: 0;\n}\n.vc-arrow-right {\n\tborder-top: 15px solid transparent;\n\tborder-bottom: 15px solid transparent;\n\tborder-left: 15px solid #FF3300;\n\theight: 0;\n\twidth: 0;\n}\n.vc-arrow-left {\n\tborder-top: 20px solid transparent;\n\tborder-bottom: 20px solid transparent;\n\tborder-right: 20px solid #0033FF;\n\theight: 0;\n\twidth: 0;\n}\n.vc-arrow-multicolor {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: solid;\n\tborder-width: 20px;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-singlecolor-double {\n\tborder: 20px double #666666;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-multicolor-double {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: double;\n\tborder-width: 20px;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-singlecolor-groove {\n\tborder: 20px groove #666666;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-multicolor-ridge {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: ridge;\n\tborder-width: 20px;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-singlecolor-inset {\n\tborder: 20px inset #666666;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-multicolor-outset {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: outset;\n\tborder-width: 20px;\n\twidth: 0;\n\theight: 0;\n}\n.vc-arrow-multicolor-width {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: solid;\n\tborder-width: 20px;\n\twidth: 20px;\n\theight: 0;\n}\n.vc-arrow-singlecolor-double-width {\n\tborder: 20px double #666666;\n\twidth: 20px;\n\theight: 0;\n}\n.vc-arrow-multicolor-height {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: solid;\n\tborder-width: 20px;\n\twidth: 0;\n\theight: 20px;\n}\n.vc-arrow-singlecolor-double-height {\n\tborder: 20px double #666666;\n\twidth: 0;\n\theight: 20px;\n}\n.vc-arrow-multicolor-height-width {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: solid;\n\tborder-width: 20px;\n\twidth: 20px;\n\theight: 20px;\n}\n.vc-arrow-multicolor-border-width {\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\n\tborder-style: solid;\n\tborder-width: 15px 30px 30px 10px;\n\twidth: 0;\n\theight: 0;\n}\n<\/style>\n<div class=\"vc-arrow-up\"><\/div>\n<p>Code to create this arrow:<br \/>\nCSS:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-up {\r\n\tborder-left: 15px solid transparent;\r\n\tborder-right: 15px solid transparent;\r\n\tborder-bottom: 15px solid #666666;\r\n\theight: 0;\r\n\twidth: 0;\r\n}\r\n<\/pre>\n<p>HTML:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;vc-arrow-up&quot;&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Code to create all other arrows:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-down {\r\n\tborder-left: 10px solid transparent;\r\n\tborder-right: 10px solid transparent;\r\n\tborder-top: 10px solid #009900;\r\n\theight: 0;\r\n\twidth: 0;\r\n}\r\n.vc-arrow-right {\r\n\tborder-top: 15px solid transparent;\r\n\tborder-bottom: 15px solid transparent;\r\n\tborder-left: 15px solid #FF3300;\r\n\theight: 0;\r\n\twidth: 0;\r\n}\r\n.vc-arrow-left {\r\n\tborder-top: 20px solid transparent;\r\n\tborder-bottom: 20px solid transparent;\r\n\tborder-right: 20px solid #0033FF;\r\n\theight: 0;\r\n\twidth: 0;\r\n}\r\n<\/pre>\n<p>Here are how the other 3 arrows will look:<\/p>\n<div class=\"vc-arrow-down\"><\/div>\n<div class=\"vc-arrow-right\"><\/div>\n<div class=\"vc-arrow-left\"><\/div>\n<p>Using this simple CSS code we can easily create triangles without using images. We can also use this technique to create different designs. Below are some samples that can be done using different kinds of borders and using single or multiple border colors.<\/p>\n<p>Multi colored Div:<\/p>\n<div class=\"vc-arrow-multicolor\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: solid;\r\n\tborder-width: 20px;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Single color, border-style:double<\/p>\n<div class=\"vc-arrow-singlecolor-double\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-singlecolor-double {\r\n\tborder: 20px double #666666;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Multi-color, border-style:double<\/p>\n<div class=\"vc-arrow-multicolor-double\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-double {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: double;\r\n\tborder-width: 20px;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Single color, border-style:groove<\/p>\n<div class=\"vc-arrow-singlecolor-groove\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-singlecolor-groove {\r\n\tborder: 20px groove #666666;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Multi-color, border-style:ridge<\/p>\n<div class=\"vc-arrow-multicolor-ridge\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-ridge {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: ridge;\r\n\tborder-width: 20px;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Single color, border-style:inset<\/p>\n<div class=\"vc-arrow-singlecolor-inset\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-singlecolor-inset {\r\n\tborder: 20px inset #666666;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Multi-color, border-style:outset<\/p>\n<div class=\"vc-arrow-multicolor-outset\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-outset {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: outset;\r\n\tborder-width: 20px;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>In all the above designs we had the width and height parameters set to 0. We can change them to get more designs.<\/p>\n<p>Multi colored Div, non-zero width:<\/p>\n<div class=\"vc-arrow-multicolor-width\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-width {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: solid;\r\n\tborder-width: 20px;\r\n\twidth: 20px;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Single color, border-style:double, non-zero width<\/p>\n<div class=\"vc-arrow-singlecolor-double-width\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-singlecolor-double-width {\r\n\tborder: 20px double #666666;\r\n\twidth: 20px;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>Multi colored Div, non-zero height:<\/p>\n<div class=\"vc-arrow-multicolor-height\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-height {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: solid;\r\n\tborder-width: 20px;\r\n\twidth: 0;\r\n\theight: 20px;\r\n}\r\n<\/pre>\n<p>Single color, border-style:double, non-zero height<\/p>\n<div class=\"vc-arrow-singlecolor-double-height\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-singlecolor-double-height {\r\n\tborder: 20px double #666666;\r\n\twidth: 0;\r\n\theight: 20px;\r\n}\r\n<\/pre>\n<p>Also, we can change the elements width and height to get different designs.<\/p>\n<p>Multi colored Div, non-zero height and width:<\/p>\n<div class=\"vc-arrow-multicolor-height-width\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-height-width {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: solid;\r\n\tborder-width: 20px;\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n<\/pre>\n<p>Also, we can change the elements border width and height for different sides to get different designs.<\/p>\n<p>Multi colored Div, different border widths and heights:<\/p>\n<div class=\"vc-arrow-multicolor-border-width\"><\/div>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.vc-arrow-multicolor-border-width {\r\n\tborder-color: #FF3300 #0033FF #FFFF00 #009900;\r\n\tborder-style: solid;\r\n\tborder-width: 15px 30px 30px 10px;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n<\/pre>\n<p>We can create many more designs by changing the border-color, border-size, border-style, height and width of the element. By using the above properties we can easily create arrows and different designs from CSS and without using any images.<\/p>\n<p><a id=\"demo_link\" data-title=\"View Demo\" href=\"https:\/\/www.virendrachandak.com\/demos\/css-triangles-arrows-designs.php\"><i class=\"icon fa fa-camera-retro\"><\/i> View Demo<\/a><br \/>\n<a id=\"source_link\" data-title=\"Download Source Code\" href=\"https:\/\/www.virendrachandak.com\/demos\/css-triangles-arrows-designs.zip\"><i class=\"icon fa fa-download\"><\/i> Download Source Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will see how to easily we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[142,8],"tags":[125,127,126],"class_list":["post-1650","post","type-post","status-publish","format-standard","hentry","category-css","category-web-development","tag-arrows","tag-design","tag-triangle"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create Triangles using CSS - Virendra&#039;s TechTalk<\/title>\n<meta name=\"description\" content=\"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.\" \/>\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.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Triangles using CSS - Virendra&#039;s TechTalk\" \/>\n<meta property=\"og:description\" content=\"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/\" \/>\n<meta property=\"og:site_name\" content=\"Virendra&#039;s TechTalk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:published_time\" content=\"2013-12-16T02:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-02-12T07:01:22+00:00\" \/>\n<meta name=\"author\" content=\"Virendra Chandak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:site\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Virendra Chandak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/\"},\"author\":{\"name\":\"Virendra Chandak\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"headline\":\"How to create Triangles using CSS\",\"datePublished\":\"2013-12-16T02:07:00+00:00\",\"dateModified\":\"2015-02-12T07:01:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/\"},\"wordCount\":625,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"keywords\":[\"arrows\",\"design\",\"triangle\"],\"articleSection\":[\"CSS\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/\",\"name\":\"How to create Triangles using CSS - Virendra&#039;s TechTalk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\"},\"datePublished\":\"2013-12-16T02:07:00+00:00\",\"dateModified\":\"2015-02-12T07:01:22+00:00\",\"description\":\"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/css-triangles-arrows-designs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TechTalk\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/category\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to create Triangles using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\",\"name\":\"Virendra's TechTalk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\",\"name\":\"Virendra Chandak\",\"logo\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.virendrachandak.com\",\"https:\\\/\\\/www.facebook.com\\\/virendrachandak\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/virendrachandak\\\/\",\"https:\\\/\\\/x.com\\\/virendrachandak\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Triangles using CSS - Virendra&#039;s TechTalk","description":"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.","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.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","og_locale":"en_US","og_type":"article","og_title":"How to create Triangles using CSS - Virendra&#039;s TechTalk","og_description":"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.","og_url":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","og_site_name":"Virendra&#039;s TechTalk","article_publisher":"https:\/\/www.facebook.com\/virendrachandak","article_author":"https:\/\/www.facebook.com\/virendrachandak","article_published_time":"2013-12-16T02:07:00+00:00","article_modified_time":"2015-02-12T07:01:22+00:00","author":"Virendra Chandak","twitter_card":"summary_large_image","twitter_creator":"@virendrachandak","twitter_site":"@virendrachandak","twitter_misc":{"Written by":"Virendra Chandak","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/#article","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/"},"author":{"name":"Virendra Chandak","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"headline":"How to create Triangles using CSS","datePublished":"2013-12-16T02:07:00+00:00","dateModified":"2015-02-12T07:01:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/"},"wordCount":625,"commentCount":0,"publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"keywords":["arrows","design","triangle"],"articleSection":["CSS","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","url":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","name":"How to create Triangles using CSS - Virendra&#039;s TechTalk","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website"},"datePublished":"2013-12-16T02:07:00+00:00","dateModified":"2015-02-12T07:01:22+00:00","description":"We can easily create Triangles and some other designs using CSS and no images. We will create single and multi-colored designs without using any images.","breadcrumb":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TechTalk","item":"https:\/\/www.virendrachandak.com\/techtalk\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.virendrachandak.com\/techtalk\/category\/css\/"},{"@type":"ListItem","position":3,"name":"How to create Triangles using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website","url":"https:\/\/www.virendrachandak.com\/techtalk\/","name":"Virendra's TechTalk","description":"","publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.virendrachandak.com\/techtalk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17","name":"Virendra Chandak","logo":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.virendrachandak.com","https:\/\/www.facebook.com\/virendrachandak","https:\/\/www.linkedin.com\/in\/virendrachandak\/","https:\/\/x.com\/virendrachandak"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2vTtQ-qC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/comments?post=1650"}],"version-history":[{"count":0,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1650\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/media?parent=1650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/categories?post=1650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/tags?post=1650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}