Question

我用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;

}

我想在两边添加一个白色圆圈。像这样的东西： http://imgur.com/a/je00B 由于我想旋转整个图像，我想将所有内容组合在一个对象中（可能标记为#bar）。

有可能吗？如何？

Answer 1

您可以使用:before和:after伪元素创建圈子，使用position: absolute来定位圈子。

＆＃13;

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

＆＃13;

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

＆＃13;

定位伪元素而不是position: absolute的另一种方法是使用Flexbox并在父元素上设置justify-content: space-between。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

用CSS组合形状

2 个答案: