Ribbon tag made for a div

by John Kiran

HTML

<html>
<style>

    #pointer {
      min-width: 200px;
      min-height: 40px;
      position: relative;
      background: red;
			display: inline-block;
			line-height: center;
    }
    #pointer:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    #pointer:before {
      content: "";
      position: absolute;
      right: -20px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
</style>
<body>

<div id="pointer">
<span style="
    display: block;
    padding-left: 24px;
">
 In the example above, elements that have a class name of .wrap will be .... the element's parent, or in other words, the width of the containing block. .... be the size of that image, so the text wraps at the edges of the image. .... All values need to be prefixed by either -webkit- or -moz- (depending on the vendor) ...
</span>
</div>
</body>

</html>