{"id":3681,"date":"2012-07-31T20:08:36","date_gmt":"2012-07-31T20:08:36","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3681"},"modified":"2019-03-02T09:16:35","modified_gmt":"2019-03-02T09:16:35","slug":"contenedores-torcidos-con-css3","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/","title":{"rendered":"Contenedores torcidos con CSS3"},"content":{"rendered":"<p>En este art\u00edculo vamos a aprender como crear divs o contenedores torcidos con CSS3 rompiendo la est\u00e9tica habitual del dise\u00f1o de las p\u00e1ginas Web.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3693\" title=\"divs-torcidos\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\" alt=\"\" width=\"158\" height=\"211\" \/><\/a>Para conseguir el efecto de la imagen tan solo deberemos a\u00f1adir en nuestra p\u00e1gina los siguientes estilos CSS:<\/p>\n<pre>div {\r\n\u00a0\u00a0 \u00a0width:100px;\r\n\u00a0\u00a0 \u00a0height:75px;\r\n\u00a0\u00a0 \u00a0background-color:red;\r\n\u00a0\u00a0 \u00a0border:1px solid black;\r\n\u00a0\u00a0 \u00a0padding:5px;\r\n\u00a0\u00a0 \u00a0margin-left:20px;\r\n}\r\ndiv#div2 {\r\n\u00a0\u00a0 \u00a0transform:rotate(30deg);\r\n\u00a0\u00a0 \u00a0-ms-transform:rotate(30deg); \/* IE 9 *\/\r\n\u00a0\u00a0 \u00a0-moz-transform:rotate(30deg); \/* Firefox *\/\r\n\u00a0\u00a0 \u00a0-webkit-transform:rotate(30deg); \/* Safari and Chrome *\/\r\n\u00a0\u00a0 \u00a0-o-transform:rotate(30deg); \/* Opera *\/\r\n\u00a0\u00a0 \u00a0padding:5px;\r\n}<\/pre>\n<p>Y luego en el &lt;body&gt;:<\/p>\n<pre>&lt;div&gt;Este contenedor esta recto.&lt;\/div&gt;\r\n&lt;div id=\"div2\"&gt;Este contenedor esta torcido.&lt;\/div&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/torcer-divs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a aprender como crear divs o contenedores torcidos con CSS3 rompiendo la est\u00e9tica habitual del dise\u00f1o de las p\u00e1ginas Web. Para conseguir el efecto de la imagen tan solo deberemos a\u00f1adir en nuestra p\u00e1gina los siguientes estilos CSS: div { \u00a0\u00a0 \u00a0width:100px; \u00a0\u00a0 \u00a0height:75px; \u00a0\u00a0 \u00a0background-color:red; \u00a0\u00a0 \u00a0border:1px solid black; \u00a0\u00a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3693,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[74],"class_list":["post-3681","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>Contenedores torcidos con CSS3 - 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=\"Contenedores torcidos con CSS3 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a aprender como crear divs o contenedores torcidos con CSS3 rompiendo la est\u00e9tica habitual del dise\u00f1o de las p\u00e1ginas Web. Para conseguir el efecto de la imagen tan solo deberemos a\u00f1adir en nuestra p\u00e1gina los siguientes estilos CSS: div { \u00a0\u00a0 \u00a0width:100px; \u00a0\u00a0 \u00a0height:75px; \u00a0\u00a0 \u00a0background-color:red; \u00a0\u00a0 \u00a0border:1px solid black; \u00a0\u00a0 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/\" \/>\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-31T20:08:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\" \/>\n\t<meta property=\"og:image:width\" content=\"158\" \/>\n\t<meta property=\"og:image:height\" content=\"211\" \/>\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\/contenedores-torcidos-con-css3\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/\",\"name\":\"Contenedores torcidos con CSS3 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\",\"datePublished\":\"2012-07-31T20:08:36+00:00\",\"dateModified\":\"2019-03-02T09:16:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png\",\"width\":158,\"height\":211},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contenedores torcidos con CSS3\"}]},{\"@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":"Contenedores torcidos con CSS3 - 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":"Contenedores torcidos con CSS3 - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a aprender como crear divs o contenedores torcidos con CSS3 rompiendo la est\u00e9tica habitual del dise\u00f1o de las p\u00e1ginas Web. Para conseguir el efecto de la imagen tan solo deberemos a\u00f1adir en nuestra p\u00e1gina los siguientes estilos CSS: div { \u00a0\u00a0 \u00a0width:100px; \u00a0\u00a0 \u00a0height:75px; \u00a0\u00a0 \u00a0background-color:red; \u00a0\u00a0 \u00a0border:1px solid black; \u00a0\u00a0 [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-31T20:08:36+00:00","article_modified_time":"2019-03-02T09:16:35+00:00","og_image":[{"width":158,"height":211,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.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\/contenedores-torcidos-con-css3\/","url":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/","name":"Contenedores torcidos con CSS3 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png","datePublished":"2012-07-31T20:08:36+00:00","dateModified":"2019-03-02T09:16:35+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/divs-torcidos.png","width":158,"height":211},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/contenedores-torcidos-con-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Contenedores torcidos con CSS3"}]},{"@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\/3681","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=3681"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3681\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3693"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}