{"id":3588,"date":"2012-07-30T20:33:57","date_gmt":"2012-07-30T20:33:57","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3588"},"modified":"2012-07-30T20:35:40","modified_gmt":"2012-07-30T20:35:40","slug":"css-triangle-arrow-divs","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/","title":{"rendered":"CSS Triangle Arrow DIVs"},"content":{"rendered":"<p>Una caracter\u00edstica sutil de CSS que se ha aprovechado para hacer algo interesante es emplear su uso para crear puros tri\u00e1ngulos CSS. Estos tri\u00e1ngulos tienen la ventaja de ser muy ligero (sin utilizaci\u00f3n de im\u00e1genes).<\/p>\n<p>La t\u00e9cnica funciona sabiendo el hecho de que los 4 bordes CSS de un elemento se encuentran en un \u00e1ngulo, y cuando las dimensiones del elemento se establece en 0, el colapso de las fronteras y 4 se tocan, creando la apariencia de los 4 tri\u00e1ngulos, podiendo hacer contenedores como los siguientes:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/trinagle-arrows.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3666\" title=\"trinagle-arrows\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/trinagle-arrows.png\" alt=\"\" width=\"629\" height=\"314\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/trinagle-arrows.png 629w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/trinagle-arrows-300x149.png 300w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/a>Para implementar, por ejemplo, el primer contenedor tendremos que desarrollar lo siguiente en CSS:<\/p>\n<pre>.uparrowdiv {\r\n\u00a0\u00a0 \u00a0width:600px;\r\n\u00a0\u00a0 \u00a0min-height:40px; \/*min height of DIV should be set to at least 2x the width of the arrow*\/\r\n\u00a0\u00a0 \u00a0background: black;\r\n\u00a0\u00a0 \u00a0color:white;\r\n\u00a0\u00a0 \u00a0padding:5px;\r\n\u00a0\u00a0 \u00a0position:relative;\r\n\u00a0\u00a0 \u00a0word-wrap:break-word;\r\n\u00a0\u00a0 \u00a0-moz-border-radius:5px; \/*add some nice CSS3 round corners*\/\r\n\u00a0\u00a0 \u00a0-webkit-border-radius:5px;\r\n\u00a0\u00a0 \u00a0border-radius:5px;\r\n\u00a0\u00a0 \u00a0margin-bottom:2em;\r\n}\r\n\r\n.uparrowdiv:after{ \/*arrow added to uparrowdiv DIV*\/\r\n\u00a0\u00a0 \u00a0content:'';\r\n\u00a0\u00a0 \u00a0display:block;\r\n\u00a0\u00a0 \u00a0position:absolute;\r\n\u00a0\u00a0 \u00a0top:-20px; \/*should be set to -border-width x 2 *\/\r\n\u00a0\u00a0 \u00a0left:30px;\r\n\u00a0\u00a0 \u00a0width:0;\r\n\u00a0\u00a0 \u00a0height:0;\r\n\u00a0\u00a0 \u00a0border-color: transparent transparent black transparent; \/*border color should be same as div div background color*\/\r\n\u00a0\u00a0 \u00a0border-style: solid;\r\n\u00a0\u00a0 \u00a0border-width: 10px;\r\n}<\/pre>\n<p>Y en el &lt;body&gt; de nuestra p\u00e1gina, el contenedor:<\/p>\n<pre>&lt;div class=\"uparrowdiv\"&gt;This is a test&lt;\/div&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/triangle-arrows-divs\/\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una caracter\u00edstica sutil de CSS que se ha aprovechado para hacer algo interesante es emplear su uso para crear puros tri\u00e1ngulos CSS. Estos tri\u00e1ngulos tienen la ventaja de ser muy ligero (sin utilizaci\u00f3n de im\u00e1genes). La t\u00e9cnica funciona sabiendo el hecho de que los 4 bordes CSS de un elemento se encuentran en un \u00e1ngulo, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[74],"class_list":["post-3588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-contenedores"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Triangle Arrow DIVs - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Triangle Arrow DIVs - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Una caracter\u00edstica sutil de CSS que se ha aprovechado para hacer algo interesante es emplear su uso para crear puros tri\u00e1ngulos CSS. Estos tri\u00e1ngulos tienen la ventaja de ser muy ligero (sin utilizaci\u00f3n de im\u00e1genes). La t\u00e9cnica funciona sabiendo el hecho de que los 4 bordes CSS de un elemento se encuentran en un \u00e1ngulo, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-30T20:33:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-07-30T20:35:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/\",\"name\":\"CSS Triangle Arrow DIVs - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2012-07-30T20:33:57+00:00\",\"dateModified\":\"2012-07-30T20:35:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Triangle Arrow DIVs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Triangle Arrow DIVs - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS Triangle Arrow DIVs - Jose Aguilar Blog","og_description":"Una caracter\u00edstica sutil de CSS que se ha aprovechado para hacer algo interesante es emplear su uso para crear puros tri\u00e1ngulos CSS. Estos tri\u00e1ngulos tienen la ventaja de ser muy ligero (sin utilizaci\u00f3n de im\u00e1genes). La t\u00e9cnica funciona sabiendo el hecho de que los 4 bordes CSS de un elemento se encuentran en un \u00e1ngulo, [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-30T20:33:57+00:00","article_modified_time":"2012-07-30T20:35:40+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/","url":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/","name":"CSS Triangle Arrow DIVs - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2012-07-30T20:33:57+00:00","dateModified":"2012-07-30T20:35:40+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-triangle-arrow-divs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Triangle Arrow DIVs"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3588"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}