Combine shapes with CSS

Question

I have created a black bar with CSS:

#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;

}

I would like to add on both sides a white circle. Something like this: https://i.sstatic.net/ZZc86.jpg As I want to rotate the entire image, I would like to combine everything in one object (possibly labelled as #bar).

Is it possible? how?

Answer 1

#box {
  width: 200px;
  height: 200px;
  background: steelblue;
  margin: 50px auto;
  position: relative;
  }
#box:before {
  content: '';
  display: block;
  width: 200px;
  height: 200px;
  background: steelblue;
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  }

<div id="box"></div>

Answer 2

You can use :before and :after pseudo elements to create circles and position: absolute to position them.

#bar {
  width: 7.5em;
  height: 1em;
  margin: 50px;
  position: relative;
  background-color: #333333;
}
#bar:after,
#bar:before {
  content: '';
  background: white;
  height: 1em;
  width: 1em;
  position: absolute;
  border-radius: 50%;
  top: 0;
}
#bar:after {
  right: 0;
}
#bar:before {
  left: 0;
}

<div id="bar"></div>

Another method to position pseudo elements instead of position: absolute is to use Flexbox and just set justify-content: space-between on parent element.

#bar {
  width: 7.5em;
  height: 1em;
  margin: 50px;
  display: flex;
  justify-content: space-between;
  background-color: #333333;
}
#bar:after,
#bar:before {
  content: '';
  background: white;
  height: 1em;
  width: 1em;
  border-radius: 50%;
}

<div id="bar"></div>