title: Combine shapes with CSS
body: <p>I have created a black bar with CSS:</p>
  
  <pre><code>#bg #bar {
  top: 300px;
  width: 7.5em;
  height: 1em;
  left: 50%;
  margin-left: -3.75em;
  margin-top: -0.5em;
  position: fixed;
  background-color: #333333;
  /*border: 1px solid black;*/
  z-index: 1;
  </code></pre>
  
  <p>}</p>
  
  <p>I would like to add on both sides a white circle. Something like this:
  <a href="http://imgur.com/a/je00B" rel="nofollow">http://imgur.com/a/je00B</a>
  As I want to rotate the entire image, I would like to combine everything in one object (possibly labelled as #bar). </p>
  
  <p>Is it possible? how?</p>