Triangle and badges in css

The triangles are need to us for the callout things like the comment bubble. So how we made it using CSS only? We also make the badges using CSS only.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>triangle and badges</title>
    <style>
      .container{
        margin: 5% auto;
        width: 300px;
        height: 200px;
        background-color: #ddd;
        position: relative;
      }
      #triangle-down {
          width: 0;
      	height: 0;
      	border-left: 30px solid transparent;
      	border-right: 30px solid transparent;
      	border-top: 30px solid yellow;
        position: absolute;
        bottom: -30px;
        left:20%;
      }
      #triangle-up {
      	width: 0;
      	height: 0;
      	border-left:30px solid transparent;
      	border-right:30px solid transparent;
      	border-bottom: 30px solid yellow;
        position: absolute;
        top: -30px;
        left:20%;
      }
      #triangle-left {
      	width: 0;
      	height: 0;
      	border-top:30px solid transparent;
      	border-right: 30px solid yellow;
      	border-bottom:30px solid transparent;
        position: absolute;
        left: -30px;
        top:20%;
      }
      #triangle-right {
      	width: 0;
      	height: 0;
      	border-top:30px solid transparent;
      	border-left: 30px solid yellow;
      	border-bottom:30px solid transparent;
        position: absolute;
        right: -30px;
        top:20%;
      }
      #triangle-topleft {
      	width: 0;
      	height: 0;
      	border-top: 100px solid yellow;
      	border-right: 100px solid transparent;
        position: absolute;
        left:0px;
        top:0px;
      }
      #triangle-topright {
      	width: 0;
      	height: 0;
      	border-top: 100px solid yellow;
      	border-left: 100px solid transparent;
        position: absolute;
        right:0px;
        top:0px;
      }
      #triangle-bottomleft {
      	width: 0;
      	height: 0;
      	border-bottom: 100px solid yellow;
      	border-right: 100px solid transparent;
        position: absolute;
        bottom:0px;
        left:0px;
      }
      #triangle-bottomright {
      	width: 0;
      	height: 0;
      	border-bottom: 100px solid yellow;
      	border-left: 100px solid transparent;
        position: absolute;
        bottom:0px;
        right:0px;
      }
    </style>
  </head>
  <body>
    <div class="container" >
      <div id="triangle-down"></div>
      <div id="triangle-up"></div>
      <div id="triangle-left"></div>
      <div id="triangle-right"></div>
    </div>
    <div class="container">
      <div id="triangle-topleft"></div>
    </div>
    <div class="container">
      <div id="triangle-topright"></div>
    </div>
    <div class="container">
      <div id="triangle-bottomleft"></div>
    </div>
    <div class="container">
      <div id="triangle-bottomright"></div>
    </div>
  </body>
</html>

traingles and badges