将圆直接定位在对象后面

Question

如何获得我创建的7个项目后面的圆形箭头。与此图中显示的内容类似：http://imgur.com/Zz6HqWZ由于某种原因，我无法使其工作。有没有人知道如何实现这一目标？任何事都有帮助，欢呼。

＆＃13;

＆＃13;

.container .row {text-align:center; position:relative;}
.center {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left:-35px;
}

.circle {
  display:inline-block;
  background-color:#006850;
  width:85px;
  height:85px;
  border-width:3px;
  border-style:solid;
  border-color:#fefefe;
  border-radius:50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom:-15px;
}

.invisible {
  visibility:hidden;
  display:inline-block;
  background-color:#1f497d;
  width:130px;
  height:65px;
  border-width:3px;
  border-style:solid;
  border-color:#d6d6d6;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color:#d0d3d8;
  width: 200px;
  height: 200px;
  border: 17px solid;
  border-radius: 50%;
  position: relative;
}
.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -22px;
  margin: auto;
}
.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  bottom: 106px;
  right: -25px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="center"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="invisible"></div>
    <div class="circle"></div>
    <div class="invisible"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="center"></div>
  </div>
  <div class="arrow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据建议，您必须更改position的{​​{1}}并将其.arrow更改为z-index才能获得回复。无需-1 rotate而是更改伪选择器circle和:before的定位。

＆＃13;

＆＃13;

:after

＆＃13;

.container .row {
  text-align: center;
  position: relative;
}

.center {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.row {
  position: relative;
}

.circle {
  display: inline-block;
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom: -15px;
}

.invisible {
  visibility: hidden;
  display: inline-block;
  background-color: #1f497d;
  width: 130px;
  height: 65px;
  border-width: 3px;
  border-style: solid;
  border-color: #d6d6d6;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}

.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -10px;
  left: 55px;
  background: #fff;
  transform: rotate(-120deg);
}

.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: 0px;
  left: 40px;
  transform: rotate(-120deg);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

你需要给.container这种CSS风格：

.container {
  margin-top: -17px;
  height: 313px;
  width: 371px;
  display: flex;
  align-items: center;
}

将.container内的所有内容与ID为stuff的另一个div区分开来，除了.arrow div。

给.stuff以下样式：

.stuff {
  position: absolute;
  top: 0;
}

将以下CSS行添加到.arrow

  margin: 0 auto;

移动.arrow div 之前 .stuff div

这应该有用。

以下是我得到的结果：

.container {
  height: 313px;
  width: 371px;
  display: flex;
  align-items: center;
  margin-top: -17px;
}
.container .row {
  text-align: center;
  position: relative;
}

.center {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.circle {
  display: inline-block;
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom: -15px;
}

.invisible {
  visibility: hidden;
  display: inline-block;
  background-color: #1f497d;
  width: 130px;
  height: 65px;
  border-width: 3px;
  border-style: solid;
  border-color: #d6d6d6;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 200px;
  height: 200px;
  border: 17px solid;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -22px;
  margin: auto;
}

.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  bottom: 106px;
  right: -25px;
}
.stuff {
  position: absolute;
  top: 0;
}

<div class="container">
  <div class="arrow"></div>
  <div class="stuff">
    <div class="row">
      <div class="center"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="left"></div>
      <div class="invisible"></div>
      <div class="right"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="invisible"></div>
      <div class="circle"></div>
      <div class="invisible"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="left"></div>
      <div class="invisible"></div>
      <div class="right"></div>
    </div>
    <div class="row">
      <div class="center"></div>
    </div>
  </div>
</div>

要调整大小并旋转它，您需要将其添加到.arrow CSS：

  transform: rotate(-112deg) scale(1.2);

.container {
  height: 313px;
  width: 371px;
  display: flex;
  align-items: center;
  margin-top: -17px;
}
.container .row {
  text-align: center;
  position: relative;
}

.center {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.circle {
  display: inline-block;
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom: -15px;
}

.invisible {
  visibility: hidden;
  display: inline-block;
  background-color: #1f497d;
  width: 130px;
  height: 65px;
  border-width: 3px;
  border-style: solid;
  border-color: #d6d6d6;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 200px;
  height: 200px;
  border: 17px solid;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  transform: rotate(-112deg) scale(1.2);
}

.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -22px;
  margin: auto;
}

.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  bottom: 106px;
  right: -25px;
}
.stuff {
  position: absolute;
  top: 0;
}

<div class="container">
  <div class="arrow"></div>
  <div class="stuff">
    <div class="row">
      <div class="center"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="left"></div>
      <div class="invisible"></div>
      <div class="right"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="invisible"></div>
      <div class="circle"></div>
      <div class="invisible"></div>
    </div>
    <div class="row" style="margin-top:-15px;">
      <div class="left"></div>
      <div class="invisible"></div>
      <div class="right"></div>
    </div>
    <div class="row">
      <div class="center"></div>
    </div>
  </div>
</div>

Answer 3

要做你想做的事，你必须绝对定位你的箭头并使用z-index使它在容器上方和行下方。 这是更新的代码段：

＆＃13;

＆＃13;

.container {
  position: relative;
}
.container .row {
  text-align:center; 
  position:relative;
}
.row{z-index:2;}
.center {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left:-35px;
}

.circle {
  display:inline-block;
  background-color:#006850;
  width:85px;
  height:85px;
  border-width:3px;
  border-style:solid;
  border-color:#fefefe;
  border-radius:50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom:-15px;
}

.invisible {
  visibility:hidden;
  display:inline-block;
  background-color:#1f497d;
  width:130px;
  height:65px;
  border-width:3px;
  border-style:solid;
  border-color:#d6d6d6;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(-110deg);
  color:#d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
}
.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -22px;
  margin: auto;
}
.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  bottom: 130px;
  right: -26px;
}

＆＃13;

<div class="container">
  <div class="arrow"></div>
  <div class="row">
    <div class="center"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="invisible"></div>
    <div class="circle"></div>
    <div class="invisible"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="center"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！