{"id":28585,"date":"2016-11-30T21:01:57","date_gmt":"2016-11-30T13:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28585"},"modified":"2025-04-03T23:47:40","modified_gmt":"2025-04-03T15:47:40","slug":"translucent-css-ribbon","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/","title":{"rendered":"How to Create a CSS Ribbon"},"content":{"rendered":"<p>We talk about <strong>CSS ribbons<\/strong> in web design when a <strong>strip of box<\/strong> (called ribbon) <strong>wraps another box<\/strong>. It\u2019s a fairly used design technique to <strong>decorate text<\/strong>, especially headings. On <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener nofollow\">W3C<\/a>\u2018s website you can check out how properly used CSS ribbons can help <strong>structure content<\/strong> in a subtle way.<\/p>\n<p>So, in this post we\u2019re going to see <strong>how to create a simple CSS ribbon<\/strong> that you can use to <strong>enhance the headings<\/strong> on your website. Thanks to <strong>CSS transformations<\/strong>, we can create this design with a much simpler code base than before.<\/p>\n<p>You can take a peek at the final demo below.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/skewed-edges-css\/\">How to Create Skewed Edges With CSS<\/a>\n\t\t\t\t<\/p>\n<p><iframe height=\"469\" scrolling=\"no\" title=\"CSS Ribbon\" src=\"https:\/\/codepen.io\/hkdc\/embed\/XNMqxJ\/?height=469&theme-id=0&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/XNMqxJ\/\" rel=\"nofollow\">CSS Ribbon<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>HTML & basic styles<\/h2>\n<p>First, we create a <code>&lt;header&gt;<\/code> HTML element to which we\u2019ll later <strong>add the ribbon design<\/strong>. We place it inside a <code>&lt;section&gt;<\/code> tag we mark with the <code>.card<\/code> selector that represents a <strong>rectangle box the ribbon will <em>wrap<\/em> around<\/strong>.<\/p>\n<pre>\r\n&lt;section class=card&gt;\r\n\t&lt;header class=ribbon&gt; &lt;\/header&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>We also set the <strong>basic dimensions<\/strong> and the <strong>background color<\/strong> with CSS.<\/p>\n<pre>\r\n.card {\r\n  background-color: beige;\r\n  height: 300px;\r\n  margin: 40px;\r\n  width: 500px;\r\n}\r\n<\/pre>\n<h2>The mid-portion of the ribbon<\/h2>\n<p>We\u2019ll use a <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css-variables\/\">CSS variable<\/a><\/strong> (allows us to store and reuse a CSS value) called <code>--p<\/code> to <strong>store the padding value<\/strong>. The value of the <code>padding<\/code> property uses the <code>var(--p)<\/code> syntax for the left and right paddings of the ribbon so that it can be <strong>easily widened<\/strong>. The <code>--p<\/code> variable later will be <strong>reused multiple times<\/strong>; that makes our code flexible.<\/p>\n<pre>\r\n.ribbon {\r\n  --p: 15px;\r\n  background-color: rgb(170,170,170);\r\n  height: 60px;\r\n  padding: 0 var(--p);\r\n  width: 100%;\r\n}\r\n<\/pre>\n<p>On the screenshot below you can see how your demo is supposed to look like at this point:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg\" alt=\"Mid-portion of ribbon\" width=\"700\" height=\"433\"><\/figure>\n<h3>Centering the ribbon<\/h3>\n<p>We also need to <strong>center the ribbon<\/strong>. We <strong>push it to left by the padding size<\/strong> (marked by the <code>--p<\/code> variable) using relative positioning.<\/p>\n<pre>\r\n.ribbon {\r\n  --p: 15px;\r\n  background-color: rgb(170,170,170);\r\n  height: 60px;\r\n  padding: 0 var(--p);\r\n  position: relative;\r\n  right: var(--p);\r\n  width: 100%;\r\n}\r\n<\/pre>\n<p>The updated demo:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid-centered.jpg\" alt=\"Mid portion of Ribbon Centered\" width=\"700\" height=\"248\"><\/figure>\n<h2>The sides of the ribbon<\/h2>\n<p>Now we create the <strong>left and right sides of the ribbon<\/strong> that ought to seemingly bend around the card edge. To do so, we use both the <code>:before<\/code> and <code>:after<\/code> pseudo-elements of <code>.ribbon<\/code>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\">Understanding Pseudo-Element :before and :after<\/a>\n\t\t\t\t<\/p>\n<p>Both pseudo-elements inherit the background color of <code>.ribbon<\/code>, and we use the <code>filter: brightness(.5)<\/code> rule to darken their color a bit. They are also <strong>absolutely positioned<\/strong> within their (relatively positioned) parent.<\/p>\n<p>Their width needs to be the <strong>same as the padding size<\/strong>, and we place them <strong>to the left and right ends of the ribbon<\/strong> using the <code>left: 0<\/code> and <code>right: 0<\/code> style rules.<\/p>\n<pre>\r\n.ribbon:before,\r\n.ribbon:after {\r\n  background-color: inherit;\r\n  content:'';\r\n  display: block;\r\n  filter: brightness(.5);\r\n  height: 100%;\r\n  position: absolute;\r\n  width: var(--p);\r\n}\r\n.ribbon:before {\r\n  left: 0;\r\n}\r\n.ribbon:after {\r\n  right: 0;\r\n}\r\n<\/pre>\n<p>Now the ribbon with the sides we\u2019ve just added looks as below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-sides.jpg\" alt=\"Sides added to ribbon\" width=\"700\" height=\"233\"><\/figure>\n<h3>Skew the sides<\/h3>\n<p>To make the sides of the ribbon <strong>look bent<\/strong>, we need to <strong>skew the sides by 45\u00b0<\/strong>. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\" target=\"_blank\" rel=\"noopener\"><code>transform: skewy()<\/code><\/a> CSS rule <strong>skews elements vertically<\/strong>.<\/p>\n<pre>\r\n.ribbon:before {\r\n  left: 0;\r\n  transform:skewy(45deg);\r\n}\r\n.ribbon:after {\r\n  right: 0;\r\n  transform:skewy(-45deg);\r\n}\r\n<\/pre>\n<p>As you can see the edges of the sides <strong>don\u2019t align<\/strong> after the transformation, so we need to <strong>pull them down<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-sides-skewed.jpg\" alt=\"Ribbon with skewed sides\" width=\"700\" height=\"232\"><\/figure>\n<h3>Align the sides<\/h3>\n<p>To <strong>determine the proper length<\/strong> by which we need to move the sides down, we turn to trigonometry. <strong>What we need to find is <code>x<\/code><\/strong>, as <code>y<\/code> is the width of the sides (equals to the padding size of <code>.ribbon<\/code>), and the angle <code>\u03b8<\/code> is 45\u00b0 (the angle of the skew).<\/p>\n<p>The resulting <code>x<\/code> then <strong>needs to be halved<\/strong>, as there are a left and a right side as well.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/trig.jpg\" alt=\"Right-angled triangle\" width=\"700\" height=\"331\"><\/figure>\n<p>If you\u2019re using any CSS preprocessor check if it has a <code>tan<\/code> function, otherwise refer to a tangent chart or a calculator to <strong>find out the tangent value of the angle<\/strong>. We\u2019re lucky as <code>tan 45\u00b0<\/code> is <code>1<\/code>, which means that the value of <code>x<\/code> equals to <code>y<\/code> in our case.<\/p>\n<pre>\r\n.ribbon:before,\r\n.ribbon:after {\r\n  background-color: inherit;\r\n  content:'';\r\n  display: block;\r\n  filter: brightness(.5);\r\n  height: 100%;\r\n  position: absolute;\r\n  top: calc(var(--p)\/2);\r\n  width: var(--p);\r\n}\r\n<\/pre>\n<p>Since <code>x<\/code> had to be halved, we use the <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-calc-function\/\"><code>calc()<\/code> CSS function<\/a> to perform the division of the <code>--p<\/code> variable.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-sides-aligned.jpg\" alt=\"Sides of the ribbon aligned\" width=\"700\" height=\"201\"><\/figure>\n<p>Finally we need to <strong>align the sides along the z-axis<\/strong> as well, so let\u2019s add the <code>z-index: -1<\/code> rule to the sides in order to <strong>place them behind the mid-portion of the ribbon<\/strong>.<\/p>\n<pre>\r\n.ribbon:before,\r\n.ribbon:after {\r\n  background-color: inherit;\r\n  content:'';\r\n  display: block;\r\n  filter: brightness(.5);\r\n  height: 100%;\r\n  position: absolute;\r\n  top: calc(var(--p)\/2);\r\n  width: var(--p);\r\n  z-index: -1;\r\n}\r\n<\/pre>\n<p>Now that we aligned the sides, our CSS ribbon is done.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon.jpg\" alt=\"Final ribbon\" width=\"700\" height=\"287\"><\/figure>\n<p>Below you can check out the live demo again, please note that it uses some additional stylings as well.<\/p>\n<p><iframe height=\"469\" scrolling=\"no\" title=\"CSS Ribbon\" src=\"https:\/\/codepen.io\/hkdc\/embed\/XNMqxJ\/?height=469&theme-id=0&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/XNMqxJ\/\" rel=\"nofollow\">CSS Ribbon<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It\u2019s a fairly used design technique to decorate text, especially headings. On W3C\u2018s website you can check out how properly used CSS ribbons can help structure content in a subtle way. So, in this post we\u2019re going&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a CSS Ribbon - Hongkiat<\/title>\n<meta name=\"description\" content=\"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It&#039;s a fairly used design technique to decorate text,\" \/>\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.hongkiat.com\/blog\/translucent-css-ribbon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a CSS Ribbon\" \/>\n<meta property=\"og:description\" content=\"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It&#039;s a fairly used design technique to decorate text,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-30T13:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T15:47:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Create a CSS Ribbon\",\"datePublished\":\"2016-11-30T13:01:57+00:00\",\"dateModified\":\"2025-04-03T15:47:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/\"},\"wordCount\":647,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/translucent-css-ribbon\\\/css-ribbon-mid.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/\",\"name\":\"How to Create a CSS Ribbon - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/translucent-css-ribbon\\\/css-ribbon-mid.jpg\",\"datePublished\":\"2016-11-30T13:01:57+00:00\",\"dateModified\":\"2025-04-03T15:47:40+00:00\",\"description\":\"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It's a fairly used design technique to decorate text,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/translucent-css-ribbon\\\/css-ribbon-mid.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/translucent-css-ribbon\\\/css-ribbon-mid.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/translucent-css-ribbon\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a CSS Ribbon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a CSS Ribbon - Hongkiat","description":"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It's a fairly used design technique to decorate text,","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.hongkiat.com\/blog\/translucent-css-ribbon\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a CSS Ribbon","og_description":"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It's a fairly used design technique to decorate text,","og_url":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-11-30T13:01:57+00:00","article_modified_time":"2025-04-03T15:47:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Create a CSS Ribbon","datePublished":"2016-11-30T13:01:57+00:00","dateModified":"2025-04-03T15:47:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/"},"wordCount":647,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/","url":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/","name":"How to Create a CSS Ribbon - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg","datePublished":"2016-11-30T13:01:57+00:00","dateModified":"2025-04-03T15:47:40+00:00","description":"We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It's a fairly used design technique to decorate text,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/translucent-css-ribbon\/css-ribbon-mid.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/translucent-css-ribbon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a CSS Ribbon"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7r3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28585"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28585\/revisions"}],"predecessor-version":[{"id":73470,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28585\/revisions\/73470"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28585"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}