{"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,"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_feature_clip_id":0,"_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 v28.1 - 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,"jetpack-related-posts":[{"id":733,"url":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","url_meta":{"origin":1650,"position":0},"title":"Sticky Header and Footer using CSS","author":"Virendra Chandak","date":"February 20, 2012","format":false,"excerpt":"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how we can implement the sticky (or fixed) header and footer using only HTML and CSS. To create a layout with\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":631,"url":"https:\/\/www.virendrachandak.com\/techtalk\/make-a-div-stick-to-top-when-scrolled-to\/","url_meta":{"origin":1650,"position":1},"title":"Make a div stick to top when scrolled to","author":"Virendra Chandak","date":"January 1, 2012","format":false,"excerpt":"There are times when you would want to display a bar at the top of the page when user scrolls on the page and it should go back to its original position when the user scrolls back up. This is particularly useful when you want to add say a share\u2026","rel":"","context":"In &quot;Functionality&quot;","block_context":{"text":"Functionality","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/functionality\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":802,"url":"https:\/\/www.virendrachandak.com\/techtalk\/voting-functionality-in-a-website\/","url_meta":{"origin":1650,"position":2},"title":"Voting Functionality in a website","author":"Virendra Chandak","date":"April 10, 2011","format":false,"excerpt":"In this post I will give the step by step explanation of how we can add Voting Functionality to a website. At the end of this article we will have a working sample voting application. The source code for the sample voting application can be downloaded from here. We will\u2026","rel":"","context":"In &quot;Functionality&quot;","block_context":{"text":"Functionality","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/functionality\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2011\/10\/initial.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":117,"url":"https:\/\/www.virendrachandak.com\/techtalk\/optimizing-websites\/","url_meta":{"origin":1650,"position":3},"title":"Optimizing \/ Speeding up websites","author":"Virendra Chandak","date":"April 14, 2011","format":false,"excerpt":"In this article I will list a few things that can be done to speed up website. I will give just brief description on each topic and give links to find more details on those topics. I have used tools like Google's Page Speed, YSlow, Audits Tab in Chrome\u00a0Developer\u00a0Tools. 1.\u2026","rel":"","context":"In &quot;Optimization Tips&quot;","block_context":{"text":"Optimization Tips","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/optimization-tips\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1023,"url":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","url_meta":{"origin":1650,"position":4},"title":"Protocol relative URLs","author":"Virendra Chandak","date":"October 7, 2014","format":false,"excerpt":"Many times we have seen warnings similar to \"This page contains both secure and nonsecure items\" or \"This page has insecure content.\". This happens when we are viewing a HTTPS site and some content on the site is loaded from HTTP. So when we try to view a site say\u2026","rel":"","context":"In &quot;Web Development&quot;","block_context":{"text":"Web Development","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/web-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":765,"url":"https:\/\/www.virendrachandak.com\/techtalk\/css-important-declarations\/","url_meta":{"origin":1650,"position":5},"title":"CSS !important Declarations","author":"Virendra Chandak","date":"April 29, 2012","format":false,"excerpt":"Recently I came across lot of code using CSS !important declaration. I had known that this declaration existed but I didn't knew what it was and had never used it. So than I did my research on it and decided to write a post about it. In this article I\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_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}]}}