试图在 4 个差异的中间放置一个分隔符

Question

我试图将一个分隔符元素直接放在 4 个 div 的中心，不知何故位置的百分比指的是元素本身的 width/height 而不是其父容器中的位置。

密码本：http://codepen.io/HendrikEng/pen/ObyLKG

HTML:

<section>
    <div class="c-connector-service"></div>
    <div class="c-service">
        <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>    
    </div>
</section>

CSS:

.c-service {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.c-service-item {
  width: 41.66667%;
  float: left;
}

.c-service-item {
  background: pink;
  min-height: 30.5em;
  text-align: center;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(even) {
  border-left: 1px solid #ebebeb;
  margin-left: -1px;
  border-bottom: 1px solid #ebebeb;
}

.c-connector-service {
  position: relative;
}

.c-connector-service::after {
  background: green;
  border-left: 1px solid white;
  border-top: 1px solid white;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
}

Answer 1

删除 <div class="c-connector-service"></div> 元素，给出 c-service position: relative 并在伪上使用与给定 c-service-item[=16= 的宽度相同的左值]

.c-service {
  position: relative;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.c-service-item {
  width: 41.66667%;
  float: left;
  background: pink;
  min-height: 30.5em;
  text-align: center;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(even) {
  border-left: 1px solid #ebebeb;
  margin-left: -1px;
  border-bottom: 1px solid #ebebeb;
}
.c-service::after {
  background: green;
  border-left: 1px solid white;
  border-top: 1px solid white;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 41.66667%;
  top: 50%;
}

<section>
    <div class="c-service">
        <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>    
    </div>
</section>

试图在 4 个差异的中间放置一个分隔符

Trying to place a separator in the middle of 4 diffs

html

css

position

pseudo-element