title: CSS - Creating a play button
body: <p>I have a jsfiddle here - <a href="http://jsfiddle.net/0nvns9Lj/1/" rel="nofollow">http://jsfiddle.net/0nvns9Lj/1/</a></p>
  
  <p>I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.</p>
  
  <p>I just need to create a play button so I have a circle containing a triangle.</p>
  
  <p>It's working but seems like alot of messing for something simple</p>
  
  <pre><code>        .wrap{
              background: #ddd;
              height: 300px;
              position: relative;
          }
          .circle{
              background: red;
              border-radius: 50px;
              height: 50px;
              position: absolute;
              left: 50%;
              top: 50%;
              width: 50px;
              margin: -25px 0 0 -25px;
          }
          .circle_inner{
              position: relative;
              height: 100%;
          }
          .circle_inner:before{
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 10px 0 10px 20px;
              border-color: transparent transparent transparent #ffffff;
              position: absolute;
              top: 50%;
              left: 50%;
              margin: -10px 0 0 -7px;
          }
  </code></pre>