Karle Karle - 26 days ago 5
CSS Question

Trying to place a separator in the middle of 4 diffs

i am trying to place a separator element directly in the center of 4 divs, somehow the percentage of the position refers to the width/height of the element itself and not the position within its parent container.

Codepen : 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

Drop the <div class="c-connector-service"></div> element, give the c-service position: relative and use the same left value on the pseudo as the width given to the c-service-item

.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>

Comments