{"id":3769,"date":"2011-07-24T21:12:00","date_gmt":"2011-07-24T21:12:00","guid":{"rendered":"https:\/\/corbinrose.com\/blog\/?p=3769"},"modified":"2011-07-24T21:12:00","modified_gmt":"2011-07-24T21:12:00","slug":"css-shapes-2","status":"publish","type":"post","link":"https:\/\/corbinrose.com\/blog\/technology\/css-shapes-2\/","title":{"rendered":"CSS Shapes"},"content":{"rendered":"\n<p>Whether or not you will find a practical use for this or not, you have got to admit that this is pretty sweet. No images at all \u2013 just CSS3. Also, you can edit the CSS right there in the grey boxes. Sweet huh? <br><a href=\"http:\/\/webexpedition18.com\/articles\/the-beauty-of-css3-useful-and-innovative-coding-techniques\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Tutorials<\/a><br><a href=\"http:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\" target=\"_blank\" rel=\"noreferrer noopener\">Link to article about CSS shapes<\/a><\/p>\n\n\n\nWhether or not you will find a practical use for this or not, you have got to admit that this is pretty sweet.  No images at all \u2013 just CSS3.  Also, you can edit the CSS right there in the grey boxes.  Sweet huh? <span id=\"more-254\"><\/span>\n<div style=\"display: none\">\n  <style data-elementquery-processed=\"\"> style{  background: none repeat scroll 0 0 #333333;\n    color: white;\n    display: block;\n    font: 12px Monaco;\n    padding: 0 15px;\n    white-space: pre;\n\tborder-radius:5px;\n    -moz-border-radius:5px;\n    -webkit-border-radius:5px;\n\twidth: 300px;\n\theight:190px;\n\toverflow:auto;\n\t}\n\t\t\t\t.box .left {background:#999; padding: 5px; \n    border-radius:5px;\n    -moz-border-radius:5px;\n    -webkit-border-radius:5px;\n\tborder: 1px solid #333;\n}\n .box .right {padding: 25px 25px 25px 0px;}\n<\/style>\n<\/div>\n               \n\n<div class=\"box autoHeight\">\n<div class=\"left\">\n<style contenteditable=\"true\" data-elementquery-processed=\"\">\n#triangle-bottomright {\n\twidth: 0;\n\theight: 0;\n\tborder-bottom: 100px solid red; \n\tborder-left: 190px solid transparent;\n}\t\t\n<\/style>\n\n\n<\/div>\n<div class=\"right\">\n<div id=\"triangle-bottomright\"><\/div>\n\n<\/div>\n<div class=\"clearFloat\"><\/div>\n<\/div>\n\n\n\n<div class=\"box autoHeight\">\n<div class=\"left\">\n<style contenteditable=\"true\" data-elementquery-processed=\"\">\n#star-five {\n   margin: 50px 0;\n   position: relative;\n   display: block;\n   color: red;\n   width: 0px;\n   height: 0px;\n   border-right:  100px solid transparent;\n   border-bottom: 70px  solid red;\n   border-left:   100px solid transparent;\n   -moz-transform:   rotate(35deg);\n   -webkit-transform:rotate(35deg);\n   -ms-transform:    rotate(35deg);\n   -o-transform:     rotate(35deg);\n}\n#star-five:before {\n   border-bottom: 80px solid red;\n   border-left: 30px solid transparent;\n   border-right: 30px solid transparent;\n   position: absolute;\n   height: 0;\n   width: 0;\n   top: -45px;\n   left: -65px;\n   display: block;\n   content: '';\n   -moz-transform:rotate(-35deg);\n   -webkit-transform:rotate(-35deg);\n}\n#star-five:after {\n   position: absolute;\n   display: block;\n   color: red;\n   top: 3px;\n   left: -105px;\n   width: 0px;\n   height: 0px;\n   border-right: 100px solid transparent;\n   border-bottom: 70px solid red;\n   border-left: 100px solid transparent;\n   -moz-transform:rotate(-70deg);\n   -webkit-transform:rotate(-70deg);\n   content: '';\n}\n<\/style>\n<\/div>\n<div class=\"right\">\n<div id=\"star-five\"><\/div>\n<\/div>\n\n<div class=\"clearFloat\"><\/div>\n<\/div>\n\n\n<div class=\"box autoHeight\">\n<div class=\"left\">\n<style contenteditable=\"true\" data-elementquery-processed=\"\">#infinity {\n    position: relative;\n    width: 212px;\n    height: 100px;\n}#infinity:before,\n#infinity:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: 60px;    \n    border: 20px solid red;\n    -moz-border-radius: 50px 50px 0 50px;\n         border-radius: 50px 50px 0 50px;\n    -webkit-transform: rotate(-45deg);\n       -moz-transform: rotate(-45deg);\n        -ms-transform: rotate(-45deg);\n         -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n}#infinity:after {\n    left: auto;\n    right: 0;\n    -moz-border-radius: 50px 50px 50px 0;\n         border-radius: 50px 50px 50px 0;\n    -webkit-transform:rotate(45deg);\n       -moz-transform:rotate(45deg);\n        -ms-transform:rotate(45deg);\n         -o-transform:rotate(45deg);\n            transform:rotate(45deg);\n}\t\t\t\t\t\t\t\t\n<\/style>\n<\/div>\n<div class=\"right\">\n<div id=\"infinity\"><\/div>\n<\/div>\n\n<div class=\"clearFloat\"><\/div>\n<\/div>\n<div style=\"display:none\">\n<style data-elementquery-processed=\"\">.bigOnes{height: 25px; line-height: 25px;display: block; background: #336688; color:#eee!important; font-weight: bold; padding: 5px; border 1px solid #000;}<\/style><\/div>\n<a class=\"bigOnes\" href=\"http:\/\/webexpedition18.com\/articles\/the-beauty-of-css3-useful-and-innovative-coding-techniques\/\">CSS Tutorials<\/a> \n\n <a class=\"bigOnes\" href=\"http:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\">link to article about CSS shapes<\/a>\n","protected":false},"excerpt":{"rendered":"<p>Whether or not you will find a practical use for this or not, you have got to admit that this is pretty sweet. No images at all \u2013 just CSS3. Also, you can edit the CSS right there in the grey boxes. Sweet huh? CSS TutorialsLink to article about CSS shapes Whether or not you [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5543,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[28,17],"tags":[],"class_list":["post-3769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-technology","clearfix","post-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/corbinrose.com\/blog\/wp-content\/uploads\/2023\/01\/pexels-photo-430207-1.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/comments?post=3769"}],"version-history":[{"count":0,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3769\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media\/5543"}],"wp:attachment":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media?parent=3769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/categories?post=3769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/tags?post=3769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}