morganney/simple-css3-ribbon.html

## simple-css3-ribbon.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple CSS3 Ribbon Example</title>
    <style>
      /*
        The idea is to use CSS3 generated content of the <h1> elements
        ::before and ::after pseudo-elements. However, the actual content
        of the pseudo-elements will be empty, and appropriate declarations
        on the border properties will do most of the work of creating the
        ribbon folds (the main effect).
      */

      /* Simple reset. I'm sure your app is using something more robust. */
      * {
      	margin: 0;
      	padding: 0;
      }

      /*
      Most of this <body> styling will already be in place (perhaps on
      a different containing element) when you decide to create your ribbon,
      and you can usually just focus on the actual ribbon declarations, in
      this case targeting <h1>.
      */
      body {
      	width: 500px;
      	/* So the ribbons container doesn't extend the full browser width. */
      	padding: 20px 10px;
      	/* Containers usually provide some padding to their children. */
      	margin: 50px auto 0 auto;
      	/* So we can see both sides of our ribbon. */
      	border: 1px solid #000;
      	/* The ribbon will extend beyond something. A background color could work too. */
      }

      /* This is the ribbon body. */
      h1 {
      	position: relative;
      	/* To anchor the absolutely positioned pseudo-elements ::before and ::after */
      	width: 100%;
      	/* The ribbon needs to extend the full width of its parent. */
      	padding: 0 21px;
      	/*
      	In this case the ribbon's parent has horizontal padding we need to account
      	for (10px), and a border (1px). We also need to account for the width of the
      	ribbon folds (10px). So 10px + 1px + 10px = 21px.
      	*/
      	margin-left: -21px;
      	/* Recenter the ribbon. */
      	background-color: #fba613;
      	/* The ribbons color. */
      	text-align: center;
      	/* Just for aesthetics. */
      }

      /* This is the left ribbon fold. */
      h1::before {
      	content: '';
      	/* Don't need any content, just borders. */
      	position: absolute;
      	/* But relative to the <h1> */
      	top: 100%;
      	/* Move the ribbon fold to the bottom of the <h1>. */
      	left: 0px;
      	/* Keep the ribbon fold flush against the left side of <h1>. */
      	border-style: solid;
      	/* Nothing fancy here, a solid line works best. */
      	border-width: 5px 5px 5px 5px;
      	/* Play with these values to adjust the ribbon fold. */
      	border-color: #85580A #85580A transparent transparent;
      	/* To create the left ribbon fold, hide the bottom and left borders. */
      }

      /* This is the right ribbon fold. Mostly the same as the left. */
      h1::after {
      	content: '';
      	position: absolute;
      	top: 100%;
      	right: 0px;
      	/* Keep the ribbon fold flush against the right side of <h1>. */
      	border-style: solid;
      	border-width: 5px 5px 5px 5px;
      	border-color: #85580A transparent transparent #85580A;
      	/* To create the right ribbon fold, hide the right and bottom borders. */
      }
    </style>
  </head>
  <body>
    <h1>Some Ribbon Text</h1>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple CSS3 Ribbon Example</title>
	<style>
	/*
	The idea is to use CSS3 generated content of the <h1> elements
	::before and ::after pseudo-elements. However, the actual content
	of the pseudo-elements will be empty, and appropriate declarations
	on the border properties will do most of the work of creating the
	ribbon folds (the main effect).
	*/

	/* Simple reset. I'm sure your app is using something more robust. */
	* {
	margin: 0;
	padding: 0;
	}

	/*
	Most of this <body> styling will already be in place (perhaps on
	a different containing element) when you decide to create your ribbon,
	and you can usually just focus on the actual ribbon declarations, in
	this case targeting <h1>.
	*/
	body {
	width: 500px;
	/* So the ribbons container doesn't extend the full browser width. */
	padding: 20px 10px;
	/* Containers usually provide some padding to their children. */
	margin: 50px auto 0 auto;
	/* So we can see both sides of our ribbon. */
	border: 1px solid #000;
	/* The ribbon will extend beyond something. A background color could work too. */
	}

	/* This is the ribbon body. */
	h1 {
	position: relative;
	/* To anchor the absolutely positioned pseudo-elements ::before and ::after */
	width: 100%;
	/* The ribbon needs to extend the full width of its parent. */
	padding: 0 21px;
	/*
	In this case the ribbon's parent has horizontal padding we need to account
	for (10px), and a border (1px). We also need to account for the width of the
	ribbon folds (10px). So 10px + 1px + 10px = 21px.
	*/
	margin-left: -21px;
	/* Recenter the ribbon. */
	background-color: #fba613;
	/* The ribbons color. */
	text-align: center;
	/* Just for aesthetics. */
	}

	/* This is the left ribbon fold. */
	h1::before {
	content: '';
	/* Don't need any content, just borders. */
	position: absolute;
	/* But relative to the <h1> */
	top: 100%;
	/* Move the ribbon fold to the bottom of the <h1>. */
	left: 0px;
	/* Keep the ribbon fold flush against the left side of <h1>. */
	border-style: solid;
	/* Nothing fancy here, a solid line works best. */
	border-width: 5px 5px 5px 5px;
	/* Play with these values to adjust the ribbon fold. */
	border-color: #85580A #85580A transparent transparent;
	/* To create the left ribbon fold, hide the bottom and left borders. */
	}

	/* This is the right ribbon fold. Mostly the same as the left. */
	h1::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 0px;
	/* Keep the ribbon fold flush against the right side of <h1>. */
	border-style: solid;
	border-width: 5px 5px 5px 5px;
	border-color: #85580A transparent transparent #85580A;
	/* To create the right ribbon fold, hide the right and bottom borders. */
	}
	</style>
	</head>
	<body>
	<h1>Some Ribbon Text</h1>
	</body>
	</html>