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